/* AutoScan design tokens. * * Three theme states, not two. An explicit choice stamps data-theme on ; * the default "system" setting stamps nothing, so the un-stamped document has to * resolve correctly from prefers-color-scheme alone. Every colour is defined at * :root first and only REDEFINED in the dark blocks - nothing gets its only * definition behind a media query. * * Palette rationale: the ground is graphite-biased, not neutral grey and not * cream. Light is an instrument face; dark is a dashboard at night. Amber is the * warning-lamp colour and carries meaning here, so it is a semantic token and * not the accent. */ :root{ color-scheme:light; /* ground + surfaces */ --ground:#f4f6f7; --surface:#ffffff; --surface-2:#eaeef0; --surface-3:#e0e6e9; --inverse:#12171c; /* deliberately dark panel inside a light page */ --inverse-ink:#eef2f4; --inverse-ink-2:#a9b5be; --inverse-line:#2c353d; /* rules */ --line:#dce2e6; --line-2:#c3ccd2; /* text */ --ink:#12171c; --ink-2:#414a52; --ink-3:#59636b; /* brand: -fill is a background, -on is the accessible text colour */ --brand:#d91f2a; --brand-h:#ad1621; --brand-on:#b8161f; --brand-ink:#ffffff; --brand-wash:#fdeced; /* semantic - separate from the accent */ --warn:#f0a500; --warn-on:#8a5800; --warn-wash:#fdf3dd; --go:#1c8a55; --go-on:#0f6b43; --go-wash:#e6f5ed; /* interaction */ --focus:#0b63d6; --shadow-1:0 1px 2px rgba(18,23,28,.06),0 2px 8px rgba(18,23,28,.05); --shadow-2:0 4px 12px rgba(18,23,28,.08),0 18px 40px -22px rgba(18,23,28,.35); --shadow-brand:0 10px 30px -12px rgba(217,31,42,.7); /* type */ --f-display:"Barlow Condensed","Barlow","Helvetica Neue",Arial,sans-serif; --f-body:"Barlow","Helvetica Neue",Arial,sans-serif; --fs:clamp(16.5px,.42vw + 15.3px,18px); /* metrics */ --wrap:1180px; --wrap-narrow:760px; --r:10px; --r-sm:7px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ground:#101418; --surface:#171d22; --surface-2:#1e252b; --surface-3:#252e35; --inverse:#000000; --inverse-ink:#eef2f4; --inverse-ink-2:#a9b5be; --inverse-line:#242c33; --line:#283138; --line-2:#3a454e; --ink:#e9edf0; --ink-2:#b4bfc7; --ink-3:#8a97a2; --brand:#e02832; --brand-h:#f03a44; --brand-on:#ff7a80; --brand-ink:#ffffff; --brand-wash:#2a1417; --warn:#f0a500; --warn-on:#f5bd45; --warn-wash:#2b2110; --go:#22a166; --go-on:#54cf94; --go-wash:#0f2b20; --focus:#6aa9ff; --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 14px rgba(0,0,0,.55),0 20px 46px -24px rgba(0,0,0,.9); --shadow-brand:0 10px 30px -14px rgba(224,40,50,.8); } } :root[data-theme="dark"]{ color-scheme:dark; --ground:#101418; --surface:#171d22; --surface-2:#1e252b; --surface-3:#252e35; --inverse:#000000; --inverse-ink:#eef2f4; --inverse-ink-2:#a9b5be; --inverse-line:#242c33; --line:#283138; --line-2:#3a454e; --ink:#e9edf0; --ink-2:#b4bfc7; --ink-3:#8a97a2; --brand:#e02832; --brand-h:#f03a44; --brand-on:#ff7a80; --brand-ink:#ffffff; --brand-wash:#2a1417; --warn:#f0a500; --warn-on:#f5bd45; --warn-wash:#2b2110; --go:#22a166; --go-on:#54cf94; --go-wash:#0f2b20; --focus:#6aa9ff; --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 4px 14px rgba(0,0,0,.55),0 20px 46px -24px rgba(0,0,0,.9); --shadow-brand:0 10px 30px -14px rgba(224,40,50,.8); }