/* * Dark theme tokens — deep-ink surfaces, same amber/green brand accents. * * Dark is OPT-IN ONLY: it applies solely when the user picks it via the * header toggle (persisted in localStorage as fc-theme=dark, stamped onto * before first paint by the inline head script). * * The site does NOT follow the OS/browser prefers-color-scheme — the default * is always the light "warm paper" theme (:root in themes/light.css). Hence * there is a single [data-theme="dark"] block here and no media-query copy. */ [data-theme="dark"] { color-scheme: dark; /* Page & raised surfaces */ --fc-bg: #0e141b; --fc-surface: #171f2a; --fc-surface-hover: #212b38; --fc-surface-hover-soft: #1e2833; /* A step lighter than the page so the bar reads as elevated chrome. */ --fc-header-bg: rgba(27, 36, 49, 0.88); --fc-input-bg: #0f151d; /* Text scale */ --fc-ink: #e8eaee; --fc-body: #a9b1bc; --fc-body-2: #9ca5b0; --fc-prose: #b6bdc7; --fc-muted: #8e96a1; --fc-faint: #878f99; --fc-nav-link: #a9b1bc; --fc-nav-caret: #79828d; --fc-news-date: #868e98; /* Borders */ --fc-border: #242f3c; --fc-border-2: #313e4e; --fc-input-border: #616e7c; /* Brand accents */ --fc-amber: #f0a92b; --fc-amber-dark: #e09a1c; --fc-amber-ring: rgba(240, 169, 43, 0.4); --fc-link: #e9b054; --fc-green: #7fe0b6; /* Brand claret role — lifted to a clay tone for dark-background AA. */ --fc-brand: #d68f7f; --fc-rule: rgba(214, 143, 127, 0.22); --fc-grid-line: rgba(232, 234, 238, 0.03); --fc-btn-edge: rgba(0, 0, 0, 0.32); --fc-on-amber: #12181f; --fc-cta-sub: #57461b; /* Focus rings */ --fc-focus-ring: #e8eaee; --fc-focus-ring-inverse: #ffffff; /* Ink panels — stay dark, but gain a border so they read against the dark page background. */ --fc-panel-bg: #10161e; --fc-panel-border: #2a3542; --fc-panel-text: #ffffff; --fc-panel-muted: #8b95a1; --fc-panel-soft: #9aa3ae; --fc-panel-soft-2: #939ba6; --fc-panel-link: #c4c9d0; --fc-panel-empty: #848b94; --fc-ink-2: #232e3b; --fc-ink-line: #2c3846; /* Small always-dark tiles */ --fc-icon-tile: #232e3b; --fc-logo-tile: #4a5563; --fc-logo-tile-2: #4a5563; /* The raster logo is dark maroon, made for light backgrounds — give it a paper chip so it stays legible on the dark header. */ --fc-logo-chip: #f4f4f1; --fc-logo-chip-pad: 3px; /* High-contrast button — flips to light-on-dark-page */ --fc-contrast-bg: #e8eaee; --fc-contrast-text: #12181f; --fc-contrast-hover: #ffffff; /* Status */ --fc-danger: #e4715a; --fc-danger-ring: rgba(228, 113, 90, 0.45); --fc-warn-bg: #2b2210; --fc-warn-border: #4d3c14; --fc-warn-text: #e2bc6b; --fc-success-bg: #12281c; --fc-success-border: #1f4a33; --fc-success-text: #86dcb1; --fc-error-bg: #2e1512; --fc-error-border: #582821; --fc-error-text: #ec9b8d; /* Shadows — heavier, since ambient contrast is lower */ --fc-shadow-dropdown: 0 20px 44px -20px rgba(0, 0, 0, 0.65); --fc-shadow-card-hover: 0 24px 48px -30px rgba(0, 0, 0, 0.6); --fc-shadow-news-hover: 0 20px 40px -28px rgba(0, 0, 0, 0.55); --fc-shadow-info-hover: 0 14px 40px -28px rgba(0, 0, 0, 0.6); --fc-shadow-hero: 0 30px 60px -30px rgba(0, 0, 0, 0.65); --fc-shadow-auth: 0 30px 60px -40px rgba(0, 0, 0, 0.6); }