/* ═══════════════════════════════════════════════════════════════
ARAM ALGORITHM — DARK THEME (Neue Authority — Night)
Layer this AFTER shared.css. Inverts surface/text tokens while
preserving brand accent (rust) and the rest of the system.
Usage:
Or: (scope to a subtree)
═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* Surfaces — flipped */
--paper: #0E1013;
--surface: #16191F;
--fog: #1C2027;
--warm: #232830;
/* Ink + text — flipped */
--ink: #F2EFE8;
--slate: #C7C3BA;
--muted: #8A8F98;
/* Rules — low-contrast on dark */
--rule: #2A2F38;
--rule-light: #20242B;
/* Brand panel/dark stays as deep ink */
--dark: #0A0C10;
--dark-mid: #14171C;
--dark-border: #2A2F38;
/* Accent — slightly brightened so it carries on dark surfaces */
--aram-rust: #E26A37;
--amber-bright: var(--aram-rust);
/* Override small-text accent: bright rust passes AA on dark */
--accent-text: #E2774A;
/* Status — desaturated for dark */
--red: #E07A55;
--red-bg: rgba(224,122,85,0.10);
--green: #7FB994;
--green-bg: rgba(127,185,148,0.10);
--amber: #D9B36A;
--amber-bg: rgba(217,179,106,0.10);
/* Shadows — heavier, dark-mode friendly */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
--shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35);
--shadow-lg: 0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
color-scheme: dark;
}
/* ── Apply theme to body when [data-theme="dark"] is set ── */
[data-theme="dark"] body {
background: var(--paper);
color: var(--ink);
}
[data-theme="dark"] ::selection { background: var(--ink); color: var(--paper); }
[data-theme="dark"] ::-moz-selection { background: var(--ink); color: var(--paper); }
/* ── Component overrides for dark mode ────────────────────────── */
/* Nav — dark panel instead of light chalk */
[data-theme="dark"] .site-nav {
background: rgba(14,16,19,0.92);
border-bottom-color: var(--rule);
}
[data-theme="dark"] .nav-wordmark { color: var(--ink); }
[data-theme="dark"] .nav-links a { color: rgba(242,239,232,0.6); }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active { color: var(--ink); }
[data-theme="dark"] .nav-helper {
background: var(--fog);
color: var(--muted);
border-bottom-color: var(--rule);
}
[data-theme="dark"] .hamburger svg { color: rgba(242,239,232,0.7); }
/* Sections */
[data-theme="dark"] .section--fog { background: var(--fog); }
[data-theme="dark"] .section--surface { background: var(--surface); }
[data-theme="dark"] .section--dark { background: #050709; }
/* Cards */
[data-theme="dark"] .card {
background: var(--surface);
border-color: var(--rule);
}
[data-theme="dark"] .card:hover {
box-shadow: var(--shadow-md);
}
/* Buttons — primary inverts: light pill on dark surfaces */
[data-theme="dark"] .btn-primary {
background: var(--ink);
color: var(--paper);
}
[data-theme="dark"] .btn-primary:hover {
background: #FFFFFF;
}
[data-theme="dark"] .btn-ghost {
border-color: var(--rule);
color: var(--slate);
}
[data-theme="dark"] .btn-ghost:hover {
border-color: var(--ink);
color: var(--ink);
}
[data-theme="dark"] .btn-secondary {
color: var(--slate);
border-bottom-color: var(--rule);
}
[data-theme="dark"] .btn-secondary:hover {
color: var(--ink);
border-bottom-color: var(--ink);
}
/* Statute / gate badges */
[data-theme="dark"] .statute,
[data-theme="dark"] .gate-badge {
background: var(--warm);
border-color: var(--rule);
color: var(--ink);
}
/* Footer */
[data-theme="dark"] .site-footer {
background: #0A0C10;
border-top-color: var(--rule);
}
[data-theme="dark"] .footer-grid { border-bottom-color: var(--rule); }
[data-theme="dark"] .footer-col-label { color: rgba(242,239,232,0.85); }
[data-theme="dark"] .footer-links a { color: rgba(242,239,232,0.6); }
[data-theme="dark"] .footer-links a:hover { color: var(--ink); }
[data-theme="dark"] .footer-tagline,
[data-theme="dark"] .footer-action-copy { color: rgba(242,239,232,0.78); }
[data-theme="dark"] .footer-statutes span {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.1);
color: rgba(242,239,232,0.7);
}
[data-theme="dark"] .footer-action-link {
color: rgba(242,239,232,0.78);
border-bottom-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-disclaimer { color: rgba(242,239,232,0.55); }
[data-theme="dark"] .footer-home-link { color: var(--ink); }
/* Page shell */
[data-theme="dark"] .page-shell-card {
background: var(--surface);
border-color: var(--rule);
}
/* Verdict badges keep semantic color but use dark-mode tints */
[data-theme="dark"] .v-tag--nd { background: var(--red-bg); color: var(--red); }
[data-theme="dark"] .v-tag--ind { background: var(--amber-bg); color: var(--amber); }
[data-theme="dark"] .v-tag--def { background: var(--green-bg); color: var(--green); }
/* Stat numbers — brighten on dark */
[data-theme="dark"] .stat-big__num--red { color: var(--red); }
[data-theme="dark"] .stat-big__num--amber { color: var(--amber); }
[data-theme="dark"] .stat-big__num--green { color: var(--green); }
/* Focus rings — keep rust, stays visible on both themes */
/* Skip link contrast on dark */
[data-theme="dark"] .skip-link {
background: var(--ink);
color: var(--paper);
}
/* ═══════════════════════════════════════════════════════════════
AUTO MODE (optional) — uncomment to follow OS preference
when no explicit data-theme is set on .
═══════════════════════════════════════════════════════════════
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #0E1013;
--surface: #16191F;
--ink: #F2EFE8;
--slate: #C7C3BA;
--muted: #8A8F98;
--rule: #2A2F38;
--rule-light: #20242B;
}
}
═════════════════════════════════════════════════════════════════ */