/* ========================================================================== tokens.css — the ONLY place literal values live. Light + Dark. Theme resolves three ways: bare :root = light; system dark via the media query (guarded so an explicit light choice wins); and [data-theme="dark"] for the in-app toggle. The app stamps data-theme on . ========================================================================== */ :root { color-scheme: light; /* color */ --bg:#e9edf0; --surface:#ffffff; --surface-2:#f2f5f7; --panel:#e7ebee; --ink:#26333a; --ink-soft:#5f6f78; --ink-faint:#8a99a1; --line:#d7dee2; --line-2:#e8edf0; --green:#2ca01c; --green-deep:#108000; --green-tint:#e3f1e1; --on-accent:#ffffff; --navy:#2d3b4d; --navy-hover:#3a4a5e; --navy-fg:#eef1f4; --navy-faint:#9fb0c0; --row-hover:#eef5f8; --row-sel:#bcd7ec; --amber:#8a6d1b; --amber-bg:#fbf1d6; --red:#d52b1e; --red-tint:#fbe4e2; --brand:#1d4e68; /* logo circle */ --shadow-1:0 1px 2px rgba(20,45,60,.07); --shadow-2:0 5px 18px rgba(20,45,60,.08); /* type */ --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --font-ui:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --fs-100:.75rem; --fs-200:.8125rem; --fs-300:.9375rem; --fs-400:1rem; --fs-500:1.25rem; --fs-600:1.5rem; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --ls-wide:.06em; /* space / shape */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --radius-1:6px; --radius-2:10px; --radius-pill:999px; --ease:cubic-bezier(.2,.6,.2,1); --dur:150ms; } @media (prefers-reduced-motion:reduce){ :root{ --dur:0ms; } } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#121519; --surface:#1c2025; --surface-2:#161a1d; --panel:#171b1f; --ink:#e6eaec; --ink-soft:#a1aab2; --ink-faint:#76828b; --line:#39424b; --line-2:#2b323a; --green:#34b524; --green-deep:#2ca01c; --green-tint:#153018; --navy:#1b2530; --navy-hover:#28353f; --navy-fg:#e6eaec; --navy-faint:#8394a3; --row-hover:#1c2b34; --row-sel:#223a46; --amber:#e2c878; --amber-bg:#2f2b16; --red:#ef5350; --red-tint:#3a1f1d; --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 6px 20px rgba(0,0,0,.5); }} :root[data-theme="dark"]{ color-scheme:dark; --bg:#121519; --surface:#1c2025; --surface-2:#161a1d; --panel:#171b1f; --ink:#e6eaec; --ink-soft:#a1aab2; --ink-faint:#76828b; --line:#39424b; --line-2:#2b323a; --green:#34b524; --green-deep:#2ca01c; --green-tint:#153018; --navy:#1b2530; --navy-hover:#28353f; --navy-fg:#e6eaec; --navy-faint:#8394a3; --row-hover:#1c2b34; --row-sel:#223a46; --amber:#e2c878; --amber-bg:#2f2b16; --red:#ef5350; --red-tint:#3a1f1d; --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 6px 20px rgba(0,0,0,.5); }