/* * LSANinja brand tokens. * Source: https://lsaninja.com/brand-guidelines.html (fetched 2026-06-16) * Single source of truth for color/typography/radius — every page should * reference these custom properties instead of hardcoding hex values. * * Theming: light values are the :root default. Dark values apply under * @media (prefers-color-scheme: dark) — i.e. system preference governs * by default. A user's explicit choice (sun/moon toggle, persisted to * localStorage as `theme`) sets , which * has higher specificity than the media query and wins when present. * No data-theme attribute = pure system-preference behavior. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=Inter:wght@400;500;600&display=swap'); :root { /* ---- Light theme (default) ---- */ --brand-deep-slate: #f5f6f8; /* primary background */ --brand-accent: #f97316; /* CTAs, highlights, brand accent — constant across themes */ --brand-accent-dark: #ea580c; /* button hover/pressed states — constant across themes */ --brand-white: #0d1b2a; /* primary text (named for its dark-mode role: "text on dark bg") */ --brand-bg-mid: #eceef1; /* section alternates, table headers */ --brand-card-bg: #ffffff; /* cards, panels, elevated surfaces */ --brand-border: #dde1e7; /* dividers, borders, input borders */ --brand-text-muted: #5b6573; /* body copy, labels, secondary text */ --brand-text-subtle: #8993a3; /* placeholders, hints, tertiary labels */ --brand-success: #059669; /* positive states, checkmarks */ --brand-warning: #b45309; /* warnings, pending states */ --brand-deep-dark: #ffffff; /* deepest/sticky-nav layer (inverted vs. dark mode) */ --brand-danger-text: #dc2626; /* error/destructive text */ --brand-info-text: #2563eb; /* informational text/links */ /* Typography */ --brand-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --brand-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Radii */ --radius-sm: 6px; /* badges, tags, pills, inputs */ --radius-md: 10px; /* buttons, dropdowns, tooltips */ --radius-lg: 16px; /* cards, panels, modals, sections */ --radius-full: 9999px;/* pills, avatars, toggles */ } /* ---- Dark theme: system preference ---- */ @media (prefers-color-scheme: dark) { :root { --brand-deep-slate: #0d1b2a; --brand-white: #ffffff; --brand-bg-mid: #111f2e; --brand-card-bg: #162032; --brand-border: #3d5670; --brand-text-muted: #8d9fab; --brand-text-subtle: #7e93a8; --brand-success: #10b981; --brand-warning: #f59e0b; --brand-deep-dark: #070f16; --brand-danger-text: #f87171; --brand-info-text: #60a5fa; } } /* ---- Explicit user choice always wins over system preference ---- */ html[data-theme="light"] { --brand-deep-slate: #f5f6f8; --brand-white: #0d1b2a; --brand-bg-mid: #eceef1; --brand-card-bg: #ffffff; --brand-border: #dde1e7; --brand-text-muted: #5b6573; --brand-text-subtle: #8993a3; --brand-success: #059669; --brand-warning: #b45309; --brand-deep-dark: #ffffff; --brand-danger-text: #dc2626; --brand-info-text: #2563eb; } html[data-theme="dark"] { --brand-deep-slate: #0d1b2a; --brand-white: #ffffff; --brand-bg-mid: #111f2e; --brand-card-bg: #162032; --brand-border: #3d5670; --brand-text-muted: #8d9fab; --brand-text-subtle: #7e93a8; --brand-success: #10b981; --brand-warning: #f59e0b; --brand-deep-dark: #070f16; --brand-danger-text: #f87171; --brand-info-text: #60a5fa; } /* Smooth, subtle transition when the user toggles theme (not on initial load). */ html.theme-transition, html.theme-transition * { transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; } /* Spinning brand-icon loader. Spec: 1.2s linear, clockwise, no glow/pulse/shadow/recolor. */ @keyframes brand-spin { to { transform: rotate(360deg); } } .brand-spinner { display: inline-block; animation: brand-spin 1.2s linear infinite; } .brand-spinner.brand-spinner-page { width: 48px; height: 48px; } .brand-spinner.brand-spinner-modal { width: 32px; height: 32px; } .brand-spinner.brand-spinner-inline{ width: 20px; height: 20px; } /* ---- Theme toggle control (sidebar, auth cards, gmb top-nav) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--brand-border); background: var(--brand-card-bg); color: var(--brand-text-muted); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; } .theme-toggle:hover { color: var(--brand-accent); border-color: var(--brand-accent); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-light, .theme-toggle .icon-dark, .theme-toggle .icon-auto { display: none; } html[data-theme="light"] .theme-toggle .icon-light { display: block; } html[data-theme="dark"] .theme-toggle .icon-dark { display: block; } html:not([data-theme]) .theme-toggle .icon-auto { display: block; } /* ---- Theme toast: brief confirmation shown after toggling theme ---- */ .theme-toast { position: fixed; top: 64px; right: 20px; z-index: 2500; display: flex; align-items: center; gap: 8px; background: var(--brand-card-bg); color: var(--brand-white); border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: 10px 16px; font-size: 13px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; } .theme-toast.show { opacity: 1; transform: translateY(0); } .theme-toast svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--brand-accent); }