/* ════════════════════════════════════════════════════════════ Design tokens — "deep space HUD" palette (indigo × cyan × teal). A cooler, higher-contrast interface series: crisp cool paper in light mode, deep-void panels in night mode, with luminous borders, scanline overlays and grid backdrops layered on top. Every colour / effect lives here; component CSS stays in main.css. Sections: 01 light series · 02 dark (night) series. ════════════════════════════════════════════════════════════ */ /* ── 01 Light series (default) ─────────────────────────────── */ :root { color-scheme: light; /* Surfaces — crisp cool paper, layered panels */ --bg: #eff3fa; --bg-2: #e6ecf7; --surface: #ffffff; --surface-2: #f2f6fd; --surface-3: #e8eefb; --edge: rgba(37, 99, 235, 0.55); /* Ink — deep space navy. --faint is a *text* tone, so it has to clear 4.5:1 on --bg, --surface and --surface-2 (tools/site-verify.mjs measures it). It used to be #8d9ab4, which was 2.8:1 on white while carrying 9.5px labels. Decoration uses --hair/--line, never a text token. */ --ink: #0d1730; --text: #3c4a68; --muted: #5a6885; --faint: #5e6c88; /* Lines + luminous borders */ --line: rgba(13, 23, 48, 0.10); --line-2: rgba(13, 23, 48, 0.18); --line-glow: rgba(56, 189, 248, 0.42); --hair: rgba(13, 23, 48, 0.07); /* Brand accents — indigo primary, cyan secondary, teal zen. --sky and --leaf are used for small uppercase micro-labels, so they are darkened to clear 4.5:1 on the paper ground; the vivid originals survive as --neon and inside the decorative gradients. */ --sun: #2563eb; /* electric blue — primary */ --sun-deep: #1d4ed8; /* deep blue */ --peach: #7c3aed; /* violet — hover */ --sky: #0e7490; /* cyan — data / HUD (readable as text) */ --leaf: #0f766e; /* teal — zen (readable as text) */ --rose: #e11d8f; /* magenta — rare accent */ --neon: #22d3ee; /* neon cyan — glows, markers, decoration only */ /* Accent surfaces that carry white text. Separate stops from --grad-tech because that gradient is also used with background-clip:text, where a darker stop would be unreadable in night mode. Every stop clears 4.5:1 against --on-accent, in both themes — see the contrast-tokens check. */ --accent-1: #0e7490; --accent-2: #1d4ed8; --accent-3: #6d28d9; --on-accent: #ffffff; --grad-accent: linear-gradient(120deg, var(--accent-1) 0%, var(--accent-2) 52%, var(--accent-3) 100%); --grad-sun: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); --grad-tech: linear-gradient(120deg, #22d3ee 0%, #2563eb 52%, #7c3aed 100%); --grad-hair: linear-gradient(90deg, transparent, var(--neon), var(--peach), transparent); --sun-soft: rgba(37, 99, 235, 0.10); --sky-soft: rgba(14, 116, 144, 0.10); --leaf-soft: rgba(15, 118, 110, 0.10); /* Shape + rhythm — one scale each, so components stop inventing numbers. The old file declared --hud-radius and then used 11 literal radii. */ --r-xs: 7px; --r-sm: 11px; --r-md: 16px; --r-pill: 999px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; /* The blueprint grid, defined once. Six copies of this image existed. */ --grid-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); --grid-size: 42px 42px; /* Film grain, layered at ~3% to stop the large flat grounds looking like plastic. A data URI so it costs no request and no animation. */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); /* Effects — crisp, luminous, screen-like */ --glow: rgba(37, 99, 235, 0.32); --glow-soft: rgba(124, 58, 237, 0.20); --glow-neon: rgba(34, 211, 238, 0.45); --shadow-sm: 0 1px 2px rgba(13, 23, 48, 0.07), 0 2px 10px rgba(13, 23, 48, 0.06); --shadow-md: 0 10px 30px -12px rgba(13, 23, 48, 0.20), 0 2px 8px rgba(13, 23, 48, 0.06); --shadow-lg: 0 28px 70px -24px rgba(13, 23, 48, 0.30), 0 6px 18px -8px rgba(13, 23, 48, 0.12); --shadow-sun: 0 12px 32px -10px rgba(37, 99, 235, 0.38); --shadow-neon: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 10px 34px -14px rgba(34, 211, 238, 0.45); /* Chrome */ --nav-bg: rgba(239, 243, 250, 0.78); --menu-bg: #ffffff; /* Matrix / CRT screen — always dark, phosphor green (never themed) */ --code-bg: #040b06; --code-ink: #cdf7db; --tok-k: #8ef0b0; --tok-t: #6ff0b4; --tok-f: #86d9ff; --tok-s: #b6f7cf; --tok-m: #ff9db0; --tok-p: #8ba0b0; --matrix-head: #e8fff1; /* stream head — near-white flash */ --matrix-body: #1fe06a; /* phosphor green — the rain itself */ --matrix-glow: rgba(31, 224, 106, 0.55); --matrix-dim: rgba(4, 11, 6, 1); --ov: rgba(239, 243, 250, 0.94); --ov-mid: rgba(239, 243, 250, 0.55); --footer-bg: #070d1c; --footer-ink: #eef2f9; --footer-dim: #8fa0bf; /* The footer plate is dark in both themes, so its own chrome is defined once here rather than per theme. */ --footer-grid: rgba(148, 163, 184, 0.09); --footer-rule: rgba(148, 163, 184, 0.28); --footer-brand: #7dd3fc; --footer-link: #a5d8f5; --footer-link-hover: #d6ecfb; --scrim: linear-gradient(180deg, rgba(6, 11, 24, 0) 32%, rgba(6, 11, 24, 0.82) 100%); /* Background fx — aurora haze + tech grid */ --mesh-a: rgba(37, 99, 235, 0.20); --mesh-b: rgba(34, 211, 238, 0.16); --mesh-c: rgba(124, 58, 237, 0.16); --dot: rgba(13, 23, 48, 0.09); --grid-line: rgba(37, 99, 235, 0.07); --grid-line-strong: rgba(37, 99, 235, 0.13); --scanline: rgba(37, 99, 235, 0.055); --selection: #93c5fd; --selection-ink: #0b1533; --ring: #2563eb; /* Scrollbar */ --scroll-track: transparent; --scroll-thumb-grad: linear-gradient(180deg, #38bdf8, #2563eb 60%, #7c3aed); --scroll-thumb: #2563eb; } /* ── 02 Dark series — deep space (night) ───────────────────── */ html[data-theme="night"] { color-scheme: dark; --bg: #050a16; --bg-2: #08111f; --surface: #0d1729; --surface-2: #132038; --surface-3: #182a48; --edge: rgba(56, 189, 248, 0.60); --ink: #eaf2ff; --text: #b8c7e2; --muted: #a3b4d4; --faint: #8b9cbb; --line: rgba(234, 242, 255, 0.10); --line-2: rgba(234, 242, 255, 0.20); --line-glow: rgba(56, 189, 248, 0.55); --hair: rgba(234, 242, 255, 0.08); --sun: #60a5fa; --sun-deep: #93c5fd; --peach: #c4b5fd; --sky: #7dd3fc; --leaf: #5eead4; --rose: #f472b6; --neon: #22d3ee; /* --accent-*, --on-accent, --grad-accent, the radii and the grid/noise tokens are inherited from :root on purpose: they are contrast-driven and must not drift between themes. */ --grad-sun: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --grad-tech: linear-gradient(120deg, #22d3ee 0%, #3b82f6 52%, #a78bfa 100%); --grad-hair: linear-gradient(90deg, transparent, var(--neon), var(--peach), transparent); --sun-soft: rgba(96, 165, 250, 0.14); --sky-soft: rgba(56, 189, 248, 0.14); --leaf-soft: rgba(45, 212, 191, 0.14); --glow: rgba(59, 130, 246, 0.40); --glow-soft: rgba(167, 139, 250, 0.30); --glow-neon: rgba(34, 211, 238, 0.50); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.70), 0 8px 24px -10px rgba(0, 0, 0, 0.50); --shadow-sun: 0 12px 32px -10px rgba(59, 130, 246, 0.40); --shadow-neon: 0 0 0 1px rgba(34, 211, 238, 0.40), 0 10px 34px -14px rgba(34, 211, 238, 0.50); --nav-bg: rgba(5, 10, 22, 0.80); --menu-bg: #101d33; --ov: rgba(5, 10, 22, 0.94); --ov-mid: rgba(5, 10, 22, 0.55); --footer-bg: #030711; --footer-ink: #e6ebf7; --footer-dim: #8496b5; --scrim: linear-gradient(180deg, rgba(2, 5, 12, 0) 32%, rgba(2, 5, 12, 0.85) 100%); --mesh-a: rgba(59, 130, 246, 0.20); --mesh-b: rgba(34, 211, 238, 0.14); --mesh-c: rgba(139, 92, 246, 0.16); --dot: rgba(234, 242, 255, 0.10); --grid-line: rgba(56, 189, 248, 0.07); --grid-line-strong: rgba(56, 189, 248, 0.14); --scanline: rgba(56, 189, 248, 0.05); --selection: #3b82f6; --selection-ink: #050a16; --ring: #60a5fa; --scroll-track: transparent; --scroll-thumb-grad: linear-gradient(180deg, #22d3ee, #3b82f6 60%, #8b5cf6); --scroll-thumb: #3b82f6; }