/* ============================================================ TOKENS — design system, NORA-derived ------------------------------------------------------------ THREE themes via [data-theme] on : · nightsky — minimalist premium, gunmetal aura (default) · blackout — tactical, burning amber afterburner · white — premium light, monochrome nightsky + blackout tokens lifted directly from NORA v30 source. white is project-lift-specific. ============================================================ */ /* ---- BASE TOKENS — shared across all themes ------------- */ :root { /* radius / spacing */ --radius: 8px; --radius-sm: 4px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* type */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Saira Condensed', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; --text-3xl: 64px; --text-4xl: 96px; /* motion — NORA's exact easing */ --easing: cubic-bezier(.2, .7, .2, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; /* layout */ --nav-width-desktop: 240px; /* NORA spec */ --nav-height-mobile: 56px; --content-max: 1280px; --reading-max: 720px; /* z-index */ --z-bg-fx: 0; /* body::before */ --z-overlay: 1; /* .fx-overlay scanline + stars */ --z-reactor: 1; /* .fx-reactor */ --z-content: 2; --z-nav: 50; --z-modal: 100; } /* ============================================================ THEME · NIGHTSKY — DEFAULT minimalist premium. near-black with cool blue undertone, gunmetal chassis, silver-white accents. no candy colour. reads like a high-end product UI at midnight. ============================================================ */ :root, [data-theme="nightsky"] { --bg: #07090C; --surface: #0F1216; --surface-2: #161A20; --surface-3: #1E232B; --border: #2A2F38; /* gunmetal line */ --border-2: #4A5260; /* polished gunmetal trim */ --text: #F0F2F5; /* cool white */ --muted: #8A8F98; --muted-2: #5A5F68; --accent: #DCE3EC; /* metallic silver-white */ --accent-dim:#8A95A5; --accent-soft: rgba(220, 227, 236, .10); --live: #C8D2E0; /* cool pewter */ --orange: #A8B0BC; /* monochrome stand-in */ --orange-soft: rgba(168, 176, 188, .14); --error: #E8504C; --brand-glow-rgb: 220, 227, 236; --shadow: 0 8px 36px rgba(0, 0, 0, .65); --logo-mark: url('/assets/img/logo-dark.png'); } /* ============================================================ THEME · BLACKOUT stealth, speed. matte alloy + gunmetal, burning amber-orange afterburner cut through. ruthless precision, no clutter. ============================================================ */ [data-theme="blackout"] { --bg: #050507; --surface: #131418; --surface-2: #1B1D21; --surface-3: #25272C; --border: #2A2C32; --border-2: #3E4148; --text: #F5F5F0; --muted: #9CA0A6; --muted-2: #62656A; --accent: #FF8024; /* burning afterburner amber */ --accent-dim:#A85412; --accent-soft: rgba(255, 128, 36, .12); --live: #FFB347; --orange: #FFA64D; --orange-soft: rgba(255, 166, 77, .16); --error: #E8504C; --brand-glow-rgb: 255, 128, 36; --shadow: 0 8px 36px rgba(0, 0, 0, .7); --logo-mark: url('/assets/img/logo-original.png'); } /* ============================================================ THEME · WHITE — project-lift specific, not NORA-derived premium light. inverted palette, black accent, black logo. no starfield — would not read on white. ============================================================ */ [data-theme="white"] { --bg: #FFFFFF; --surface: #FAFAFB; --surface-2: #F3F4F6; --surface-3: #E9EAED; --border: #E5E7EB; --border-2: #D1D5DB; --text: #0A0A0B; --muted: #6B7280; --muted-2: #9CA3AF; --accent: #0A0A0B; --accent-dim:#374151; --accent-soft: rgba(10, 10, 11, .06); --live: #1F7A55; --orange: #B97316; --orange-soft: rgba(229, 181, 116, .14); --error: #B91C1C; --brand-glow-rgb: 10, 10, 11; --shadow: 0 4px 24px rgba(0, 0, 0, .08); --logo-mark: url('/assets/img/logo-light.png'); }