/* Lemma design tokens (LEMMA-UI-OVERHAUL-1030, C1/F01, C7/F13). The one file that sets the look: every value is
   named by its role, components read these custom properties only, and swapping a theme block re-skins every page.
   theme.js sets data-preset (the theme), data-mode, data-density, data-shadow, data-motion, data-grain and data-rail
   on <html> before first paint, and may override accent, secondary, fonts, radius and base size inline after
   contrast checks. Themes: Lemma (default), Sage, Ocean, Graphite and High contrast, each with a dark variant that
   Mode = Dark or System picks automatically. Every text pair is at least 4.5:1 (scripts/theme-contrast.cjs and the
   LEMMA-UI-OVERHAUL-1030 tests in tests/frontend.test.cjs check them). Fonts are self-hosted (OFL); no colour is
   defined outside this file. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('/static/fonts/inter/InterVariable.woff2') format('woff2-variations')}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url('/static/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations')}
/* The Latin-subset files declare their range, so a glyph they lack (the brand "λ") falls back to the next family in the
   stack instead of downloading the same file again through the page's versioned @font-face override. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(/static/fonts/fraunces-latin-var.woff2) format("woff2-variations"),url(/static/fonts/fraunces-latin-var.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(/static/fonts/nunito-latin-var.woff2) format("woff2-variations"),url(/static/fonts/nunito-latin-var.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(/static/fonts/atkinson-hyperlegible-latin-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(/static/fonts/atkinson-hyperlegible-latin-700.woff2) format("woff2")}

/* ---------- Roles shared by every theme, plus the Lemma light palette (the default) ---------- */
:root{
  color-scheme:light;
  /* Font stacks (curated list, also mirrored in theme.js) */
  --font-fraunces:"Fraunces",Georgia,"Times New Roman",serif;
  --font-inter:"Inter",var(--font-system);
  --font-nunito:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-atkinson:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-system:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --font-humanist:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  /* One serif for headings and hero figures; Inter for text, labels and money (working tabular figures). */
  --f-head:var(--font-fraunces);
  --f-body:var(--font-inter);
  --f-num:var(--font-inter);
  --f-mono:var(--font-inter);
  --head-weight:600;
  --title-weight:500;

  /* Type scale (rem, follows the base size set on <html>); the 13 px floor for the small steps follows this block. */
  --fs-root:16px;
  --fs-2xs:.6875rem;--fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.75rem;--fs-2xl:2.5rem;
  --fs-label:max(13px,var(--fs-sm)); /* UXF2R: label/chip size with a 13 px floor at the smallest (14 px) base */
  --lh:1.5;
  --track-title:-.02em;
  --track-eyebrow:.08em;

  /* Spacing, scaled by density */
  --density:1;
  --s1:calc(4px * var(--density));--s2:calc(8px * var(--density));--s3:calc(12px * var(--density));
  --s4:calc(16px * var(--density));--s5:calc(24px * var(--density));--s6:calc(32px * var(--density));--s7:calc(48px * var(--density));
  --section-gap:calc(clamp(28px,3.2vw,40px) * var(--density));
  --control-h:calc(44px * (0.5 + var(--density) / 2));
  --control-h-sm:calc(36px * (0.5 + var(--density) / 2));

  /* Shape, scaled by the Corners setting: calm 14-18 px cards, pill buttons and chips */
  --round:1;
  --r-xs:calc(6px * var(--round));--r-sm:calc(10px * var(--round));--r-md:calc(14px * var(--round));--r-lg:calc(18px * var(--round));
  --r-pill:999px;--r-blob:58% 42% 52% 48%/48% 56% 44% 52%;

  /* Motion (UI-MOTION-FONT-1024, STUDY C4): controls 140, tab/chart 240, sheet in 280, numbers/bars 280 (FIN-LOOK-A value kept), fade 120 */
  --t-fast:140ms;--t:240ms;--t-sheet:280ms;--t-slow:280ms;--t-fade:120ms;--ease:cubic-bezier(.2,.8,.2,1);
  --lift:-2px;--rise:8px;

  /* Layout */
  --rail-w:240px;--rail-w-icons:84px;--content-max:1440px;--tabbar-h:72px;

  /* Lemma light: warm paper, ink, one deep claret, brass for the second role. ok = the accent; green means money up. */
  --bg:#F7F3EC;--surface:#FFFFFF;--surface-2:#F1EBE2;--surface-3:#E8E0D4;--surface-hover:#FBF8F3;
  --line:#E6DED2;--line-strong:#8C806F;
  --ink:#1F1A15;--ink-2:#574E43;--muted:#5C5348;
  --accent:#8C2A3C;--accent-ink:#7A2333;--accent-tint:#F5E6E7;--on-accent:#FFFFFF;
  --secondary:#80601F;--secondary-ink:#6E5219;--secondary-tint:#F4ECDB;--on-secondary:#FFFFFF;
  --ok:#8C2A3C;--ok-ink:#7A2333;--ok-tint:#F5E6E7;
  --warn:#96641F;--warn-ink:#714A12;--warn-tint:#F6ECD9;
  --info:#3F5E8C;--info-ink:#34507A;--info-tint:#E8ECF2;
  --danger:#B4483B;--danger-ink:#933629;--danger-tint:#F7E4DF;--on-danger:#FFFFFF;
  --gain-ink:#24693A;
  --band:#4F1A26;--on-band:#F7F3EC;--on-band-2:#E6C9CF;
  /* Look A chart fills (pairwise CIEDE2000 >= 20): slot 1 also backs holding avatars, so it carries --surface text. */
  --chart-1:#3F5E8C;--chart-2:#9563AD;--chart-3:#1A8D96;--chart-4:#101728;--chart-5:#9B3159;--chart-6:#92721A;--chart-7:#C85A39;--chart-8:#6F6C68;
  /* FINUI1022: one categorical palette (UI-GUIDE 2.4), literal per mode and shared by every theme,
     so series stay distinct and >=3:1 on every theme's --surface. Slot 8 is always "Other". */
  --cat-1:#0072B2;--cat-2:#B05800;--cat-3:#7F1C7B;--cat-4:#B4508C;
  --cat-5:#3D9AD6;--cat-6:#5A3B00;--cat-7:#6A4BC4;--cat-8:#8C959F;
  --border-control:var(--ink-2);
  /* FINUX2-L1 fixed asset-class colours (C4), FINUI1022: the UI-GUIDE 2.4 slot colours (equity 1, property 2,
     retirement 3, private 4, cash 5, bonds 6, funds 7, other 8); literal per mode, independent of themes. */
  --asset-cash:#3D9AD6;--asset-equity:#0072B2;--asset-bonds:#5A3B00;--asset-funds:#6A4BC4;
  --asset-property:#B05800;--asset-retirement:#7F1C7B;--asset-private:#B4508C;--asset-other:#8C959F;
  --tip-bg:#1F1A15;--tip-ink:#F7F3EC;--tip-ink-2:#CFC6B8;
  --bar-bg:#1F1A15;--bar-ink:#F7F3EC;--bar-ink-2:#CFC6B8;--bar-cta:#E7B4BD;--on-bar-cta:#1F1A15;
  --rail-bg:#F2ECE3;
  --glass:rgb(247 243 236 / .86);
  --scrim:rgb(31 26 21 / .38);
  --focus:#7A2333;
  --terminal-bg:#0B1214;--terminal-ink:#EDF2EB;--qr-bg:#FFFFFF;
  --grain-opacity:0;--grain-blend:multiply;

  /* Shadows: two tinted levels plus one for overlays; depth set by data-shadow */
  --sh-tint:31 26 21;--sh-tint-2:31 26 21;
  --sh-1:0 1px 2px rgb(var(--sh-tint) / .05),0 6px 20px -8px rgb(var(--sh-tint) / .14);
  --sh-2:0 2px 4px rgb(var(--sh-tint) / .06),0 16px 34px -12px rgb(var(--sh-tint) / .24);
  --sh-3:0 24px 60px -12px rgb(var(--sh-tint-2) / .3);
}

/* UI-GUIDE 2.2 (--t-meta), DOBBY-UIUX-9 and UXT1: no text below 13 px, at every base size theme.js allows (14-20 px),
   on every page and in every theme. The phone-only and Finance-only floors before 1030 are now this one rule. */
:root{--fs-2xs:max(13px,.8125rem);--fs-xs:max(13px,.8125rem);--fs-sm:max(13px,.875rem)}

/* ---------- Lemma dark ---------- */
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#15110D;--surface:#1E1914;--surface-2:#282119;--surface-3:#332B23;--surface-hover:#231D17;
  --line:#382F27;--line-strong:#8C806F;
  --ink:#F2EBE0;--ink-2:#CABFAE;--muted:#BEB2A1;
  --accent:#E59AA8;--accent-ink:#EEB3BE;--accent-tint:#3D2027;--on-accent:#15110D;
  --secondary:#D6B36E;--secondary-ink:#E4C68D;--secondary-tint:#382D1A;--on-secondary:#15110D;
  --ok:#E59AA8;--ok-ink:#EEB3BE;--ok-tint:#3D2027;
  --warn:#E2B36A;--warn-ink:#F1CA86;--warn-tint:#352B1C;
  --info:#8FB0E0;--info-ink:#A9C3EA;--info-tint:#1F2B3D;
  --danger:#EE9A8F;--danger-ink:#F5B3AA;--danger-tint:#3A2220;--on-danger:#15110D;
  --gain-ink:#9AD6B0;
  --band:#3A1A21;--on-band:#F2EBE0;--on-band-2:#DCC3C8;
  --chart-1:#8FB0E0;--chart-2:#EDA9D7;--chart-3:#47E8E8;--chart-4:#2D7478;--chart-5:#AC4785;--chart-6:#B7A52D;--chart-7:#C06530;--chart-8:#B6AE9F;
  /* FINUI1022: dark steps of the same categorical slots (UI-GUIDE 2.4); asset colours use the same slots. */
  --cat-1:#4AA3E8;--cat-2:#F08A3C;--cat-3:#C854BB;--cat-4:#F28FC7;
  --cat-5:#A6DBFA;--cat-6:#C9A15A;--cat-7:#8F7BF0;--cat-8:#6B7480;
  --asset-cash:#A6DBFA;--asset-equity:#4AA3E8;--asset-bonds:#C9A15A;--asset-funds:#8F7BF0;
  --asset-property:#F08A3C;--asset-retirement:#C854BB;--asset-private:#F28FC7;--asset-other:#6B7480;
  --tip-bg:#F2EBE0;--tip-ink:#15110D;--tip-ink-2:#574E43;
  --bar-bg:#F2EBE0;--bar-ink:#15110D;--bar-ink-2:#574E43;--bar-cta:#7A2333;--on-bar-cta:#FFFFFF;
  --rail-bg:#1A1511;
  --glass:rgb(21 17 13 / .86);
  --scrim:rgb(0 0 0 / .55);
  --focus:#EEB3BE;
  --sh-tint:0 0 0;--sh-tint-2:0 0 0;
  --grain-blend:overlay;
}

/* ---------- Sage: calm green with warm terracotta (Clover-like) ---------- */
:root[data-preset="sage"]{
  --chart-1:var(--accent);--chart-2:var(--secondary);--chart-3:var(--info);--chart-4:var(--ink-2);
  --bg:#FBF8F2;--surface:#FFFFFF;--surface-2:#F2EEE5;--surface-3:#E3E8DD;--surface-hover:#F8F5EE;
  --line:#DCDFD4;--line-strong:#7D877F;
  --ink:#1F2D26;--ink-2:#4A5850;--muted:#4E5C54;
  --accent:#2E6A4E;--accent-ink:#285E45;--accent-tint:#E1EADF;--on-accent:#FFFFFF;
  --secondary:#A8492A;--secondary-ink:#933F22;--secondary-tint:#F7EAD9;--on-secondary:#FFFFFF;
  --ok:#2E6A4E;--ok-ink:#285E45;--ok-tint:#E1EADF;
  --warn:#94600F;--warn-ink:#71490A;--warn-tint:#F7EBD3;
  --info:#3B6687;--info-ink:#305775;--info-tint:#E3ECF2;
  --danger:#A8402F;--danger-ink:#923523;--danger-tint:#F8E3DC;--on-danger:#FFFFFF;
  --gain-ink:#22663D;
  --band:#23493A;--on-band:#FBF8F2;--on-band-2:#D3E0D6;
  --tip-bg:#1F2D26;--tip-ink:#FBF8F2;--tip-ink-2:#C6CFC8;
  --bar-bg:#1F2D26;--bar-ink:#FBF8F2;--bar-ink-2:#C6CFC8;--bar-cta:#F4B860;--on-bar-cta:#1F2D26;
  --rail-bg:#F3EFE6;
  --glass:rgb(251 248 242 / .86);
  --scrim:rgb(31 45 38 / .38);
  --focus:#A8492A;
  --sh-tint:31 45 38;--sh-tint-2:31 45 38;
}
:root[data-preset="sage"][data-mode="dark"]{
  --bg:#111915;--surface:#18221D;--surface-2:#202C26;--surface-3:#2A3831;--surface-hover:#1C2721;
  --line:#2C3A33;--line-strong:#73867B;
  --ink:#E8EFE9;--ink-2:#B6C4BA;--muted:#A8B8AC;
  --accent:#8FC7A6;--accent-ink:#A8D7BB;--accent-tint:#1E3428;--on-accent:#0F1712;
  --secondary:#E9A182;--secondary-ink:#F2B9A0;--secondary-tint:#3A261E;--on-secondary:#111915;
  --ok:#8FC7A6;--ok-ink:#A8D7BB;--ok-tint:#1E3428;
  --warn:#E4B566;--warn-ink:#F0CB86;--warn-tint:#33291A;
  --info:#8DB6DA;--info-ink:#A8C9E6;--info-tint:#1C2B39;
  --danger:#EF9C8E;--danger-ink:#F6B4A8;--danger-tint:#3A2320;--on-danger:#111915;
  --gain-ink:#9AD6B0;
  --band:#1B3A2E;--on-band:#E8EFE9;--on-band-2:#C2D3C7;
  --tip-bg:#E8EFE9;--tip-ink:#111915;--tip-ink-2:#4A5850;
  --bar-bg:#E8EFE9;--bar-ink:#111915;--bar-ink-2:#4A5850;--bar-cta:#285E45;--on-bar-cta:#FFFFFF;
  --rail-bg:#141D18;
  --glass:rgb(17 25 21 / .86);
  --scrim:rgb(0 0 0 / .55);
  --focus:#F4B860;
  --sh-tint:0 0 0;--sh-tint-2:0 0 0;
}

/* ---------- Ocean: deep sea blue on sand ---------- */
:root[data-preset="ocean"]{
  --chart-1:var(--accent);--chart-2:var(--secondary);--chart-3:var(--info);--chart-4:var(--ink-2);
  --bg:#F6F3EC;--surface:#FFFFFF;--surface-2:#EFE9DE;--surface-3:#E4DDCF;--surface-hover:#FAF8F3;
  --line:#E2DCCF;--line-strong:#7E848A;
  --ink:#13222F;--ink-2:#465462;--muted:#4B5866;
  --accent:#1F5A85;--accent-ink:#1B4F75;--accent-tint:#E1EAF2;--on-accent:#FFFFFF;
  --secondary:#8E6327;--secondary-ink:#7A541F;--secondary-tint:#F4EADA;--on-secondary:#FFFFFF;
  --ok:#1F5A85;--ok-ink:#1B4F75;--ok-tint:#E1EAF2;
  --warn:#96641F;--warn-ink:#714A12;--warn-tint:#F6ECD9;
  --info:#33658A;--info-ink:#2C5878;--info-tint:#E3EBF3;
  --danger:#B0443A;--danger-ink:#93362C;--danger-tint:#F8E3DF;--on-danger:#FFFFFF;
  --gain-ink:#22663D;
  --band:#163A57;--on-band:#F6F3EC;--on-band-2:#CBD8E3;
  --tip-bg:#13222F;--tip-ink:#F6F3EC;--tip-ink-2:#C3CCD5;
  --bar-bg:#13222F;--bar-ink:#F6F3EC;--bar-ink-2:#C3CCD5;--bar-cta:#E7C48F;--on-bar-cta:#13222F;
  --rail-bg:#F0EBE1;
  --glass:rgb(246 243 236 / .86);
  --scrim:rgb(19 34 47 / .38);
  --focus:#7A541F;
  --sh-tint:19 34 47;--sh-tint-2:19 34 47;
}
:root[data-preset="ocean"][data-mode="dark"]{
  --bg:#0D1620;--surface:#142029;--surface-2:#1B2935;--surface-3:#243442;--surface-hover:#17242F;
  --line:#263544;--line-strong:#6F8296;
  --ink:#E7EEF4;--ink-2:#B2C0CD;--muted:#A2B1BF;
  --accent:#8EBDE6;--accent-ink:#A9CEEE;--accent-tint:#1A2E41;--on-accent:#0D1620;
  --secondary:#E0B47A;--secondary-ink:#ECC795;--secondary-tint:#33291B;--on-secondary:#0D1620;
  --ok:#8EBDE6;--ok-ink:#A9CEEE;--ok-tint:#1A2E41;
  --warn:#E2B36A;--warn-ink:#F1CA86;--warn-tint:#352B1C;
  --info:#93BCE0;--info-ink:#ADCDEA;--info-tint:#1C2C3C;
  --danger:#EE9A8F;--danger-ink:#F5B3AA;--danger-tint:#3A2220;--on-danger:#0D1620;
  --gain-ink:#9AD6B0;
  --band:#12304A;--on-band:#E7EEF4;--on-band-2:#BCCBD8;
  --tip-bg:#E7EEF4;--tip-ink:#0D1620;--tip-ink-2:#465462;
  --bar-bg:#E7EEF4;--bar-ink:#0D1620;--bar-ink-2:#465462;--bar-cta:#1B4F75;--on-bar-cta:#FFFFFF;
  --rail-bg:#101B25;
  --glass:rgb(13 22 32 / .86);
  --scrim:rgb(0 0 0 / .55);
  --focus:#E7C48F;
  --sh-tint:0 0 0;--sh-tint-2:0 0 0;
}

/* ---------- Graphite: neutral and quiet ---------- */
:root[data-preset="graphite"]{
  --chart-1:var(--accent);--chart-2:var(--secondary);--chart-3:var(--info);--chart-4:var(--ink-2);
  --f-head:var(--font-inter);--head-weight:600;
  --bg:#F5F5F3;--surface:#FFFFFF;--surface-2:#EDEDEA;--surface-3:#E2E2DE;--surface-hover:#F9F9F8;
  --line:#E0E0DB;--line-strong:#7E7F7B;
  --ink:#1B1C1E;--ink-2:#4A4D52;--muted:#505359;
  --accent:#2C3440;--accent-ink:#2C3440;--accent-tint:#E6E8EC;--on-accent:#FFFFFF;
  --secondary:#5D6B7A;--secondary-ink:#4F5C6A;--secondary-tint:#E8ECF0;--on-secondary:#FFFFFF;
  --ok:#2C3440;--ok-ink:#2C3440;--ok-tint:#E6E8EC;
  --warn:#8F6118;--warn-ink:#6E4A10;--warn-tint:#F3ECDD;
  --info:#3D5F86;--info-ink:#335276;--info-tint:#E5EBF2;
  --danger:#A9433A;--danger-ink:#8F362E;--danger-tint:#F5E2DF;--on-danger:#FFFFFF;
  --gain-ink:#22663D;
  --band:#24292F;--on-band:#F5F5F3;--on-band-2:#C9CCD1;
  --tip-bg:#1B1C1E;--tip-ink:#F5F5F3;--tip-ink-2:#C4C5C8;
  --bar-bg:#1B1C1E;--bar-ink:#F5F5F3;--bar-ink-2:#C4C5C8;--bar-cta:#D5DBE3;--on-bar-cta:#1B1C1E;
  --rail-bg:#EEEEEB;
  --glass:rgb(245 245 243 / .86);
  --scrim:rgb(27 28 30 / .38);
  --focus:#35589A;
  --sh-tint:27 28 30;--sh-tint-2:27 28 30;
}
:root[data-preset="graphite"][data-mode="dark"]{
  --bg:#111214;--surface:#18191C;--surface-2:#202125;--surface-3:#2A2B30;--surface-hover:#1C1D20;
  --line:#2B2D31;--line-strong:#75787F;
  --ink:#EDEDEF;--ink-2:#B5B7BD;--muted:#A5A8AF;
  --accent:#D3D9E2;--accent-ink:#DDE2E9;--accent-tint:#262A31;--on-accent:#111214;
  --secondary:#A9B6C5;--secondary-ink:#BCC7D3;--secondary-tint:#232A33;--on-secondary:#111214;
  --ok:#D3D9E2;--ok-ink:#DDE2E9;--ok-tint:#262A31;
  --warn:#E2B36A;--warn-ink:#F1CA86;--warn-tint:#352B1C;
  --info:#93B4E0;--info-ink:#AEC6EA;--info-tint:#1D2939;
  --danger:#EE9A8F;--danger-ink:#F5B3AA;--danger-tint:#3A2220;--on-danger:#111214;
  --gain-ink:#9AD6B0;
  --band:#23262B;--on-band:#EDEDEF;--on-band-2:#C2C5CB;
  --tip-bg:#EDEDEF;--tip-ink:#111214;--tip-ink-2:#4A4D52;
  --bar-bg:#EDEDEF;--bar-ink:#111214;--bar-ink-2:#4A4D52;--bar-cta:#2C3440;--on-bar-cta:#FFFFFF;
  --rail-bg:#141517;
  --glass:rgb(17 18 20 / .86);
  --scrim:rgb(0 0 0 / .55);
  --focus:#9DB7F0;
  --sh-tint:0 0 0;--sh-tint-2:0 0 0;
}

/* ---------- High contrast: maximum legibility, own type and weights ---------- */
:root[data-preset="contrast"]{
  --f-head:var(--font-atkinson);--f-body:var(--font-atkinson);--f-num:var(--font-atkinson);--f-mono:var(--font-mono);
  --head-weight:700;--title-weight:700;
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2F2F2;--surface-3:#E0E0E0;--surface-hover:#F2F2F2;
  --line:#595959;--line-strong:#000000;
  --ink:#000000;--ink-2:#262626;--muted:#454545;
  --accent:#0B3D91;--accent-ink:#0B3D91;--accent-tint:#E3EAF7;--on-accent:#FFFFFF;
  --secondary:#8A4B00;--secondary-ink:#6B3A00;--secondary-tint:#FFF0DC;--on-secondary:#FFFFFF;
  --ok:#0A5C2B;--ok-ink:#0A5C2B;--ok-tint:#E1F3E7;
  --warn:#8A4B00;--warn-ink:#6B3A00;--warn-tint:#FFF0DC;
  --info:#00566B;--info-ink:#00566B;--info-tint:#E0F2F6;
  --danger:#A10000;--danger-ink:#8A0000;--danger-tint:#FDE4E4;--on-danger:#FFFFFF;
  --gain-ink:#0A5C2B;
  --band:#000000;--on-band:#FFFFFF;--on-band-2:#E6E6E6;
  --chart-4:#4A4A4A;--chart-5:#5B2C8F;--chart-6:#0A5C2B;
  --tip-bg:#000000;--tip-ink:#FFFFFF;--tip-ink-2:#E6E6E6;
  --bar-bg:#000000;--bar-ink:#FFFFFF;--bar-ink-2:#E6E6E6;--bar-cta:#FFD54A;--on-bar-cta:#000000;
  --rail-bg:#F2F2F2;
  --glass:#FFFFFF;
  --scrim:rgb(0 0 0 / .5);
  --focus:#0B3D91;
  --sh-tint:0 0 0;--sh-tint-2:0 0 0;
}
:root[data-preset="contrast"][data-mode="dark"]{
  --bg:#000000;--surface:#0A0A0A;--surface-2:#161616;--surface-3:#262626;--surface-hover:#161616;
  --line:#A6A6A6;--line-strong:#FFFFFF;
  --ink:#FFFFFF;--ink-2:#E6E6E6;--muted:#C8C8C8;
  --accent:#FFD54A;--accent-ink:#FFD54A;--accent-tint:#2A2410;--on-accent:#000000;
  --secondary:#7FD4FF;--secondary-ink:#7FD4FF;--secondary-tint:#0F2630;--on-secondary:#000000;
  --ok:#7CE38B;--ok-ink:#7CE38B;--ok-tint:#0F2A14;
  --warn:#FFB74D;--warn-ink:#FFB74D;--warn-tint:#2E2008;
  --info:#9ED9FF;--info-ink:#9ED9FF;--info-tint:#0D2433;
  --danger:#FF8A80;--danger-ink:#FF8A80;--danger-tint:#3A1010;--on-danger:#000000;
  --gain-ink:#7CE38B;
  --band:#0A0A0A;--on-band:#FFFFFF;--on-band-2:#E6E6E6;
  --chart-4:#D0D0D0;--chart-5:#D7B8FF;--chart-6:#7CE38B;
  --tip-bg:#FFFFFF;--tip-ink:#000000;--tip-ink-2:#262626;
  --bar-bg:#FFFFFF;--bar-ink:#000000;--bar-ink-2:#262626;--bar-cta:#0B3D91;--on-bar-cta:#FFFFFF;
  --rail-bg:#0A0A0A;
  --glass:#0A0A0A;
  --scrim:rgb(0 0 0 / .7);
  --focus:#FFD54A;
}

/* ---------- Density ---------- */
:root[data-density="compact"]{--density:.78}
:root[data-density="spacious"]{--density:1.22}

/* ---------- Shadow depth ---------- */
:root[data-shadow="none"]{--sh-1:none;--sh-2:none;--sh-3:0 0 0 1px var(--line-strong)}
:root[data-shadow="subtle"]{
  --sh-1:0 1px 2px rgb(var(--sh-tint) / .05);
  --sh-2:0 2px 8px rgb(var(--sh-tint) / .08);
  --sh-3:0 10px 28px rgb(var(--sh-tint-2) / .14)}
:root[data-shadow="lifted"]{
  --sh-1:0 2px 4px rgb(var(--sh-tint) / .07),0 12px 28px -10px rgb(var(--sh-tint) / .2);
  --sh-2:0 4px 10px rgb(var(--sh-tint) / .09),0 24px 48px -16px rgb(var(--sh-tint) / .3);
  --sh-3:0 30px 70px -10px rgb(var(--sh-tint-2) / .34)}
:root[data-mode="dark"]:not([data-shadow="none"]){
  --sh-1:0 1px 2px rgb(0 0 0 / .3),0 6px 18px -6px rgb(0 0 0 / .35);
  --sh-2:0 2px 6px rgb(0 0 0 / .35),0 18px 36px -12px rgb(0 0 0 / .5);
  --sh-3:0 24px 60px -10px rgb(0 0 0 / .6)}

/* ---------- Motion ---------- */
:root[data-motion="reduced"]{--t-fast:90ms;--t:120ms;--t-sheet:120ms;--t-slow:160ms;--lift:0px;--rise:0px}
:root[data-motion="off"]{--t-fast:0ms;--t:0ms;--t-sheet:0ms;--t-slow:0ms;--t-fade:0ms;--lift:0px;--rise:0px}
@media (prefers-reduced-motion:reduce){
  /* C4: everything goes to 0 except the opacity-only --t-fade (120 ms) */
  :root:not([data-motion="off"]){--t-fast:0ms;--t:0ms;--t-sheet:0ms;--t-slow:0ms;--lift:0px;--rise:0px}
}

/* ---------- Paper grain: an opt-in texture (Appearance > Paper grain); never in High contrast ---------- */
:root[data-grain="on"]{--grain-opacity:.035}
:root[data-grain="on"][data-mode="dark"]{--grain-opacity:.05}
:root[data-preset="contrast"][data-grain="on"]{--grain-opacity:0}