/* ==========================================================================
   Theme engine
   --------------------------------------------------------------------------
   Three independent switches on <html>:

     data-preset    surface palette   azure sage offwhite white ivory porcelain
                                      sandstone mist graphite
     data-accent    brand colour      blue indigo violet emerald amber rose slate
     data-gradient  colour intensity  none subtle vivid
     data-gloss     sheen             on off
     data-theme     light / dark      (unset = follow the device)

   styles.css owns layout and components and never hard-codes a colour; it reads
   the variables set here. Adding a preset or accent is a block in this file and
   nothing else.
   ========================================================================== */

/* ─────────────────────────────────────────────────── surface presets ── */

/* Azure — the palette of the sign-in screen, and the default everywhere else.
   The :root copy is the fallback for a document with no data-preset yet. */
:root,
:root[data-preset="azure"] {
  --bg:        #eef2fb;
  --bg-2:      #e6ecf9;
  --surface:   #ffffff;
  --surface-2: #f5f7fd;
  --surface-3: #eceffa;
  --border:    #e6eaf5;
  --border-2:  #d8dff0;
  --text:      #101a33;
  --sheen-tint: 246, 249, 255;
}

:root[data-preset="sage"] {
  --bg:        #e4eeeb;
  --bg-2:      #dde9e6;
  --surface:   #ffffff;
  --surface-2: #f3f7f6;
  --surface-3: #eaf1ef;
  --border:    #e6edeb;
  --border-2:  #d3e0dd;
  --text:      #10221f;
  --sheen-tint: 236, 246, 244;
}

/* Off-white — a barely-there neutral tint. Cards read as white against it. */
:root[data-preset="offwhite"] {
  --bg:        #f6f6f4;
  --bg-2:      #f0f0ed;
  --surface:   #ffffff;
  --surface-2: #f8f8f6;
  --surface-3: #f1f1ee;
  --border:    #ebebe7;
  --border-2:  #dcdcd7;
  --text:      #16181a;
  --sheen-tint: 250, 250, 248;
}

/* White — a pure white page. Cards are white too, so they are separated by
   their shadow and a hairline rather than by tint; both are firmed up here. */
:root[data-preset="white"] {
  --bg:        #ffffff;
  --bg-2:      #fbfbfb;
  --surface:   #ffffff;
  --surface-2: #f7f8f8;
  --surface-3: #f0f2f2;
  --border:    #e7eaea;
  --border-2:  #d6dada;
  --text:      #101314;
  --sheen-tint: 248, 250, 250;
  --shadow:    0 1px 2px rgba(16, 24, 26, .06), 0 4px 14px rgba(16, 24, 26, .07);
  --shadow-md: 0 8px 26px rgba(16, 24, 26, .12);
  --card-hairline: 1px solid #edefef;
}

:root[data-preset="ivory"] {
  --bg:        #f2ece2;
  --bg-2:      #ebe4d8;
  --surface:   #fffdf9;
  --surface-2: #f7f2e9;
  --surface-3: #f0e9dc;
  --border:    #ece4d6;
  --border-2:  #ddd2be;
  --text:      #241f17;
  --sheen-tint: 250, 245, 235;
}

:root[data-preset="porcelain"] {
  --bg:        #eef1f6;
  --bg-2:      #e6eaf1;
  --surface:   #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eceff5;
  --border:    #e6eaf0;
  --border-2:  #d3dae5;
  --text:      #131822;
  --sheen-tint: 240, 244, 250;
}

:root[data-preset="sandstone"] {
  --bg:        #f0e7dd;
  --bg-2:      #e8ddd0;
  --surface:   #fffbf7;
  --surface-2: #f8f0e8;
  --surface-3: #f0e6da;
  --border:    #ebe0d3;
  --border-2:  #dccbb7;
  --text:      #2a2118;
  --sheen-tint: 252, 245, 237;
}

:root[data-preset="mist"] {
  --bg:        #e8eef4;
  --bg-2:      #dfe8f0;
  --surface:   #ffffff;
  --surface-2: #f2f6fa;
  --surface-3: #e9f0f6;
  --border:    #e2eaf1;
  --border-2:  #ccd9e6;
  --text:      #101d29;
  --sheen-tint: 238, 246, 252;
}

:root[data-preset="graphite"] {
  --bg:        #e6e7ea;
  --bg-2:      #dedfe3;
  --surface:   #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #eaebee;
  --border:    #e4e5e9;
  --border-2:  #d0d2d8;
  --text:      #14161a;
  --sheen-tint: 244, 245, 248;
}

/* ─────────────────────────────────────────────────────────── accents ── */

:root,
:root[data-accent="blue"] {
  --brand:      #1f47c4;
  --brand-dk:   #12328f;
  --brand-hi:   #4a6ed6;
  --brand-lt:   #6f95ff;
  --brand-soft: #e7edff;
  --accent:     #3d6bf0;
  --accent-soft:#e3ebff;
  --brand-rgb:  31, 71, 196;
}
:root[data-accent="indigo"] {
  --brand: #4338ca; --brand-dk: #362fa8; --brand-lt: #7c74f0; --brand-hi: #6f66d6;
  --brand-soft: #eaeaff; --accent: #6366f1; --accent-soft: #e6e7ff;
  --brand-rgb: 67, 56, 202;
}
:root[data-accent="violet"] {
  --brand: #6d28d9; --brand-dk: #5b21b6; --brand-lt: #a271f5; --brand-hi: #8d57e1;
  --brand-soft: #f2e9ff; --accent: #8b5cf6; --accent-soft: #efe7ff;
  --brand-rgb: 109, 40, 217;
}
:root[data-accent="emerald"] {
  --brand: #047857; --brand-dk: #036049; --brand-lt: #2fb488; --brand-hi: #1b8466;
  --brand-soft: #e2f6ee; --accent: #10b981; --accent-soft: #d9f5e9;
  --brand-rgb: 4, 120, 87;
}
:root[data-accent="amber"] {
  --brand: #b45309; --brand-dk: #92400e; --brand-lt: #ef9a34; --brand-hi: #b85c15;
  /* As ink, amber on a warm preset measured 4.45:1 — a shade under. */
  --brand-ink: #a04a07;
  --brand-soft: #fdf0dc; --accent: #f59e0b; --accent-soft: #fdeed4;
  --brand-rgb: 180, 83, 9;
}
:root[data-accent="rose"] {
  --brand: #be123c; --brand-dk: #9f0f33; --brand-lt: #f2607f; --brand-hi: #cc4465;
  --brand-soft: #ffe6ec; --accent: #f43f5e; --accent-soft: #ffe3e9;
  --brand-rgb: 190, 18, 60;
}
:root[data-accent="slate"] {
  --brand: #334155; --brand-dk: #24303f; --brand-lt: #6b7d94; --brand-hi: #6c7684;
  --brand-soft: #e9edf2; --accent: #64748b; --accent-soft: #e7ebf0;
  --brand-rgb: 51, 65, 85;
}

/* ─────────────────────────────────────────────── background motif ── */
/*
   How strongly the motif behind the page shows through. An admin sets this for
   the whole company; styles.css reads the two numbers and nothing else.

   How far the ladder may go is a legibility question, and it was measured
   rather than guessed: --muted and --faint below are derived to land just above
   4.5:1 against the bare page, so a wash laid over that page would eat into the
   margin wherever text sits directly on it. It turns out none does — every
   string in the app is inside an opaque card, and the audit confirms the motif
   is never behind a glyph — which is what lets the top of the ladder be this
   strong. scripts/contrast-check.js composites this layer anyway, so the day
   some text is put straight on the page the check fails rather than the reader.
*/
:root {
  --pattern-opacity: .11;   /* light */
  --pattern-dark:    .16;   /* dark  */
}
:root[data-pattern="off"]    { --pattern-opacity: 0;   --pattern-dark: 0;   }
:root[data-pattern="faint"]  { --pattern-opacity: .06; --pattern-dark: .09; }
:root[data-pattern="soft"]   { --pattern-opacity: .11; --pattern-dark: .16; }
:root[data-pattern="strong"] { --pattern-opacity: .18; --pattern-dark: .25; }
:root[data-pattern="bold"]   { --pattern-opacity: .28; --pattern-dark: .38; }

/* ────────────────────────────────────── semantic colours (all themes) ── */

:root {
  /* Cards normally have no border — the White preset switches one on because
     white-on-white needs an edge. Any preset can override it. */
  --card-hairline: 0 none;

  /*
     Secondary and tertiary ink.

     These were eight hand-picked greys per preset, and they had drifted: the
     "faint" grey measured 2.4:1 against the page in every light preset, and
     "muted" 4.0:1 in two of them — under the 4.5:1 that body text needs, on
     the ticket metadata, the group headings and the timestamps. Deriving both
     from the preset's own ink keeps each palette's tint (sage's greys stay
     green, sandstone's stay warm) while holding the ratio everywhere, in both
     modes, including on the darker surfaces they sit on.
  */
  /* The accent used as ink rather than as a fill. In dark mode the accent is
     tuned to glow on a dark panel, which leaves it at 3.8:1 as text — so text
     takes the lighter step and fills keep the accent itself. */
  --brand-ink: var(--brand);

  --muted: #5f6b6a;
  --muted: color-mix(in srgb, var(--text) 80%, var(--bg-2));
  --faint: #78807f;
  --faint: color-mix(in srgb, var(--text) 71%, var(--bg-2));

  /*
     The two series colours the trend chart uses.
     Derived from the accent rather than hard-coded, so the one element on the
     dashboard that is about the company's own data is drawn in the company's
     own colour — it used to be a fixed blue and green whatever theme was on.
     The second is the semantic "done" green in every theme, because "resolved"
     means the same thing everywhere and should not change hue with the brand.
  */
  --chart-1: var(--brand);
  --chart-2: #0f9d76;
  /* The chart read-out: a dark chip on a light page, and a light one on a dark
     page, so it separates from the chart rather than blending into it. */
  --tip-bg:  #101a22;
  --tip-ink: #ffffff;

  --ok:        #0f9d76;
  --ok-soft:   #e0f5ee;
  --warn:      #e8930c;
  --warn-soft: #fdf0d9;
  --danger:    #e0483c;
  --danger-soft:#fdeae8;
  --info:      #2f6bff;
  --info-soft: #e6edff;
  --violet:    #7c5cf0;
  --violet-soft:#eee9fe;

  /*
     Ink for the soft-tinted surfaces. These used to be written straight into
     styles.css as dark hex values while the backgrounds behind them flipped
     with the theme, so in dark mode "Invalid username or password." was dark
     red on dark red at 2:1 — the one message on the sign-in screen that has to
     be readable. They flip here instead, with the surface they sit on.
  */
  --ink-info: #0a5b58;
  --ink-warn: #8a5806;
  --ink-bad:  #97281f;
  --ink-ok:   #0a6b51;
  --ink-violet: #4a32b0;
  /* The accent-tinted badges (In progress, Medium) sit on --accent-soft, which
     is a pale tint in light mode and a translucent wash of the accent over a
     dark surface in dark mode. One ink cannot serve both. */
  --ink-accent: var(--brand-dk);
  /* On a dark page the resolved green has to lift off the panel. */

  /* The same semantic colours used as ink on an ordinary card rather than on
     their own tinted chip. --danger and --warn are fill colours and read at
     3.6:1 and 2.4:1 as text, which is what "4d 17h overdue" was set in. */
  --danger-ink: #c03428;
  --warn-ink:   #8a5806;
  --ok-ink:     #0a6b51;

  /* A filled star is a rating, not decoration, so it has to be legible on a
     white card. The gold it was drawn in managed 1.9:1. */
  --star: #b0700a;

  /*
     The edge of a form field. --border-2 is a hairline meant for separating
     cards, and on a field it measured 1.3:1 against the page — the filter bar
     read as a row of empty boxes. Derived from the page's own ink so every
     preset and both modes get an edge you can actually see.
  */
  --field-border: #8b9d99;
  --field-border: color-mix(in srgb, var(--text) 56%, var(--surface));
}

/* ───────────────────────────────────────────────────────── gradients ── */
/*
   --grad-*  are used by summary blocks, primary buttons and the action button.
   "none" resolves every gradient to a flat colour, which also prints cleanly.
*/

/*
   The three status tiles are pale washes, not saturated blocks — they sit
   quietly on a white page. Each carries its own ink and rim so the number
   stays legible; --grad-brand and --grad-accent (buttons) are unchanged.
*/

:root {
  --ink-amber: #8a5207;
  --ink-blue:  #21419b;
  --ink-green: #0a6341;
  --rim-amber: rgba(196, 128, 22, .26);
  --rim-blue:  rgba(58, 96, 208, .22);
  --rim-green: rgba(20, 150, 100, .24);
  /* The specular arc across the top of a tile, and its corner disc. */
  --sb-sheen:   rgba(255, 255, 255, .75);
  --sb-sheen-2: rgba(255, 255, 255, .05);
  --sb-corner:  rgba(255, 255, 255, .62);
}

/*
   The ink that goes on top of the accent, and the gradient it has to survive.

   --brand-lt is a pale tint of the accent. It is right for a hover border or a
   soft fill, and wrong as the top stop of a button, because the label on that
   button is white: white on the pale end of amber measured 1.8:1, and every
   primary button and the whole sign-in panel had a band of it across the top.
   --brand-hi is the same idea with a limit — the lightest tint of each accent
   that still carries white text at 4.5:1 — so the gloss survives and the words
   stay readable.

   Dark mode inverts the problem. There the accent is deliberately bright so it
   glows against a dark page, and white on it reaches only 2.4:1. The answer is
   not to dull the accent but to stop writing in white: dark ink on a bright
   fill, which is what every dark interface does.
*/
:root {
  --on-brand: #ffffff;
  --on-brand-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  /* Amber and the bright accent are light in both modes — white on them reads
     2.4:1 and 2.2:1. They take dark ink whatever the theme. */
  --on-warn:   #0e1116;
  --on-accent: #0e1116;
}

:root, :root[data-gradient="vivid"] {
  --grad-brand:  linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 46%, var(--brand-dk) 100%);
  --grad-amber:  linear-gradient(165deg, #fff6e4 0%, #ffe9c2 52%, #fddfa8 100%);
  --grad-blue:   linear-gradient(165deg, #f0f5ff 0%, #dee8ff 52%, #cddcff 100%);
  --grad-green:  linear-gradient(165deg, #eafaf1 0%, #d2f0e0 52%, #bfe9d4 100%);
  /* --accent is lighter still than --brand-lt, so this had the same fault. */
  --grad-accent: linear-gradient(180deg, var(--brand-hi) 0%, var(--brand) 55%, var(--brand-dk) 100%);
  --grad-shadow: 0 6px 16px rgba(22, 34, 44, .09);
}

:root[data-gradient="subtle"] {
  --grad-brand:  linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%);
  --grad-amber:  linear-gradient(180deg, #fffaf0 0%, #fff0d8 100%);
  --grad-blue:   linear-gradient(180deg, #f6f9ff 0%, #e8eeff 100%);
  --grad-green:  linear-gradient(180deg, #f1fcf6 0%, #ddf4e8 100%);
  --grad-accent: linear-gradient(180deg, var(--brand) 0%, var(--brand-dk) 100%);
  --grad-shadow: 0 3px 9px rgba(22, 34, 44, .07);
}

/*
   Flat.

   Every one of these is a one-stop gradient rather than a bare colour, and
   that is load-bearing: six rules in styles.css set them with background-IMAGE
   — the only property that can carry a gradient — and a plain colour there is
   simply invalid, so the declaration is dropped and the element falls back to
   whatever background-color it had. On a primary button that meant white ink
   on a white surface. Flat mode shipped like that and nobody saw it, because
   the colour audit only ever swept presets and accents and never turned the
   gradients off. It sweeps this now too.
*/
:root[data-gradient="none"] {
  --grad-brand:  linear-gradient(var(--brand), var(--brand));
  --grad-amber:  linear-gradient(#fff2db, #fff2db);
  --grad-blue:   linear-gradient(#eaf1ff, #eaf1ff);
  --grad-green:  linear-gradient(#e4f7ec, #e4f7ec);
  --grad-accent: linear-gradient(var(--brand), var(--brand));
  --grad-shadow: none;
}

/* ───────────────────────────────────────────────────────────── gloss ── */
/*
   Gloss is four variables plus a highlight opacity. Turning it off flattens
   every surface at once — no component needs its own switch.
*/

:root, :root[data-gloss="on"] {
  --gloss-wash:  linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,0) 100%);
  --gloss-rim:   inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(16,44,40,.05);
  --gloss-sheen: radial-gradient(130% 78% at 16% -14%,
                   rgba(255,255,255,.95) 0%,
                   rgba(var(--sheen-tint), .5) 38%,
                   rgba(255,255,255,0) 66%);
  --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.14);
  --gloss-highlight: 1;
  /*
     How far a brand-coloured control sits off the page.

     Glossy: a coloured glow, which is what makes a shiny button look lit from
     within. Flat: a small neutral shadow, because a flat surface that throws
     its own colour onto the page behind it is not flat — it is a glossy button
     with the shine turned off, which is exactly what these were.
  */
  --lift-sm:     0 4px 12px rgba(var(--brand-rgb), .30);
  --lift:        0 5px 14px rgba(var(--brand-rgb), .34);
  --lift-hi:     0 7px 18px rgba(var(--brand-rgb), .40);
  --lift-fab:    0 10px 26px rgba(var(--brand-rgb), .45);
  --lift-fab-hi: 0 12px 30px rgba(var(--brand-rgb), .50);
  --gloss-fill:     linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.06) 55%, rgba(0,0,0,.06) 100%);
  --gloss-fill-rim: inset 0 1px 0 rgba(255,255,255,.55);
}

:root[data-gloss="off"] {
  --gloss-wash:  none;
  --gloss-rim:   0 0 0 1px rgba(0,0,0,.045);
  --gloss-sheen: none;
  --gloss-btn-rim: 0 0 0 1px rgba(0,0,0,.06);
  --gloss-highlight: 0;
  /* Neutral and close to the page. See the note on --lift above. */
  --lift-sm:     0 1px 2px rgba(16,44,40,.10);
  --lift:        0 1px 3px rgba(16,44,40,.12);
  --lift-hi:     0 3px 8px rgba(16,44,40,.15);
  --lift-fab:    0 6px 18px rgba(16,44,40,.20);
  --lift-fab-hi: 0 8px 22px rgba(16,44,40,.24);
  --lift-danger: 0 1px 3px rgba(16,44,40,.12);
  --gloss-fill:     none;
  --gloss-fill-rim: none;
  /* White on a solid fill needs no embossing. The shadow was there to lift the
     label off a gradient; over a flat colour it only blurs the text. */
  --on-brand-shadow: none;
}

/* ────────────────────────────────────────────────────────── dark mode ── */
/*
   One dark palette, tinted by whichever accent is chosen. Applied when the
   viewer picked dark, or when they are on "match device" and the device is dark.
*/

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a1614;
    --bg-2:      #0d1c1a;
    --surface:   #12211f;
    --surface-2: #182c29;
    --surface-3: #1d3532;
    --border:    #223936;
    --border-2:  #2d4744;
    --text:      #e8f1ef;
    --sheen-tint: 255, 255, 255;
    --brand-soft: rgba(var(--brand-rgb), .22);
    --accent-soft: rgba(var(--brand-rgb), .18);
    --ok-soft:   #06342a;
    --warn-soft: #3a2a08;
    --danger-soft:#3d1512;
    --info-soft: #14224d;
    --violet-soft:#251b4d;
    /* Light ink for those same tinted surfaces, now that they are dark. */
    --ink-info: #b9c8ff;
    --ink-warn: #f7ce8a;
    --ink-bad:  #ffb3ab;
    --ink-ok:   #7fe3c4;
    --ink-violet: #cbbcff;
    --ink-accent: var(--brand-lt);
    --brand-ink:  var(--brand-lt);
    --danger-ink: #ff9c93;
    --warn-ink:   #f0b95f;
    --ok-ink:     #7fe3c4;
    --star:     #f0a92c;
    --shadow:    0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
    --card-hairline: 0 none;
    --grad-amber: linear-gradient(165deg, #3d2f12 0%, #33270d 100%);
    --grad-blue:  linear-gradient(165deg, #1a2c52 0%, #142343 100%);
    --grad-green: linear-gradient(165deg, #0d3a2b 0%, #0a2e22 100%);
    --grad-shadow: 0 6px 16px rgba(0,0,0,.4);
    --ink-amber: #f0bd6a;
    --ink-blue:  #a6c0ff;
    --ink-green: #6ed8a6;
    --rim-amber: rgba(240,189,106,.2);
    --rim-blue:  rgba(166,192,255,.18);
    --rim-green: rgba(110,216,166,.2);
    --sb-sheen:   rgba(255, 255, 255, .10);
    --sb-sheen-2: rgba(255, 255, 255, 0);
    --sb-corner:  rgba(255, 255, 255, .10);
  }
  :root:not([data-theme="light"]):not([data-gloss="off"]) {
    --gloss-wash:  linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 100%);
    --gloss-rim:   inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30);
    --gloss-sheen: radial-gradient(130% 78% at 16% -14%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
    --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30);
  }
  :root:not([data-theme="light"])[data-gloss="off"] {
    --gloss-rim: 0 0 0 1px rgba(255,255,255,.07);
    --gloss-btn-rim: 0 0 0 1px rgba(255,255,255,.09);
  }
}

:root[data-theme="dark"] {
  --bg:        #0a1614;
  --bg-2:      #0d1c1a;
  --surface:   #12211f;
  --surface-2: #182c29;
  --surface-3: #1d3532;
  --border:    #223936;
  --border-2:  #2d4744;
  --text:      #e8f1ef;
  --sheen-tint: 255, 255, 255;
  --brand-soft: rgba(var(--brand-rgb), .22);
  --accent-soft: rgba(var(--brand-rgb), .18);
  /* The accent is tuned to glow on a dark panel; as a chart line on that same
     panel it is the lighter step that actually reads. */
  --chart-1: var(--brand-lt);
  --chart-2: #35c79b;
  --tip-bg:  #e8f1ef;
  --tip-ink: #0a1614;
  --ok-soft:   #06342a;
  --warn-soft: #3a2a08;
  --danger-soft:#3d1512;
  --info-soft: #14224d;
  --violet-soft:#251b4d;
  /* Light ink for those same tinted surfaces, now that they are dark. */
  --ink-info: #b9c8ff;
  --ink-warn: #f7ce8a;
  --ink-bad:  #ffb3ab;
  --ink-ok:   #7fe3c4;
  --ink-violet: #cbbcff;
  --ink-accent: var(--brand-lt);
  --brand-ink:  var(--brand-lt);
  --danger-ink: #ff9c93;
  --warn-ink:   #f0b95f;
  --ok-ink:     #7fe3c4;
  --star:     #f0a92c;
  --shadow:    0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);
  --card-hairline: 0 none;
  --grad-amber: linear-gradient(165deg, #3d2f12 0%, #33270d 100%);
  --grad-blue:  linear-gradient(165deg, #1a2c52 0%, #142343 100%);
  --grad-green: linear-gradient(165deg, #0d3a2b 0%, #0a2e22 100%);
  --grad-shadow: 0 6px 16px rgba(0,0,0,.4);
  --ink-amber: #f0bd6a;
  --ink-blue:  #a6c0ff;
  --ink-green: #6ed8a6;
  --rim-amber: rgba(240,189,106,.2);
  --rim-blue:  rgba(166,192,255,.18);
  --rim-green: rgba(110,216,166,.2);
  --sb-sheen:   rgba(255, 255, 255, .10);
  --sb-sheen-2: rgba(255, 255, 255, 0);
  --sb-corner:  rgba(255, 255, 255, .10);
}
:root[data-theme="dark"]:not([data-gloss="off"]) {
  --gloss-wash:  linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 100%);
  --gloss-rim:   inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30);
  --gloss-sheen: radial-gradient(130% 78% at 16% -14%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
  --gloss-btn-rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.30);
}
:root[data-theme="dark"][data-gloss="off"] {
  --gloss-rim: 0 0 0 1px rgba(255,255,255,.07);
  --gloss-btn-rim: 0 0 0 1px rgba(255,255,255,.09);
}

/* Dark mode keeps the accent readable against dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="indigo"]  { --brand: #7c74f0; --brand-dk: #5f56d8; --brand-lt: #9d97f7; }
  :root:not([data-theme="light"])[data-accent="violet"]  { --brand: #a271f5; --brand-dk: #8551dd; --brand-lt: #bd9bf9; }
  :root:not([data-theme="light"])[data-accent="emerald"] { --brand: #2fb488; --brand-dk: #1f9a72; --brand-lt: #55cba3; }
  :root:not([data-theme="light"])[data-accent="blue"]    { --brand: #6f95ff; --brand-dk: #4a6ed6; --brand-lt: #9ab6ff; }
  :root:not([data-theme="light"])[data-accent="amber"]   { --brand: #e9962c; --brand-dk: #c97a14; --brand-lt: #f4b45e; }
  :root:not([data-theme="light"])[data-accent="rose"]    { --brand: #f2607f; --brand-dk: #d34364; --brand-lt: #f78ba2; }
  :root:not([data-theme="light"])[data-accent="slate"]   { --brand: #8595ab; --brand-dk: #6b7d94; --brand-lt: #a3b0c2; }
}
:root[data-theme="dark"][data-accent="indigo"]  { --brand: #7c74f0; --brand-dk: #5f56d8; --brand-lt: #9d97f7; }
:root[data-theme="dark"][data-accent="violet"]  { --brand: #a271f5; --brand-dk: #8551dd; --brand-lt: #bd9bf9; }
:root[data-theme="dark"][data-accent="emerald"] { --brand: #2fb488; --brand-dk: #1f9a72; --brand-lt: #55cba3; }
:root[data-theme="dark"][data-accent="blue"]    { --brand: #6f95ff; --brand-dk: #4a6ed6; --brand-lt: #9ab6ff; }
:root[data-theme="dark"][data-accent="amber"]   { --brand: #e9962c; --brand-dk: #c97a14; --brand-lt: #f4b45e; }
:root[data-theme="dark"][data-accent="rose"]    { --brand: #f2607f; --brand-dk: #d34364; --brand-lt: #f78ba2; }
:root[data-theme="dark"][data-accent="slate"]   { --brand: #8595ab; --brand-dk: #6b7d94; --brand-lt: #a3b0c2; }

/*
   Dark mode writes on the accent in near-black rather than white.

   The accents above are deliberately bright so they read against a dark page,
   which leaves white on them at 2.4:1 for amber and 3.2:1 for blue — worse
   than the light-mode fault this replaced. Dark ink on a bright fill is the
   standard answer and clears 5:1 on every accent. The gradient also stops at
   --brand rather than descending to --brand-dk, which is too deep to carry it.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-hi: var(--brand-lt);
    --on-brand: #0e1116;
    --on-brand-shadow: none;
  }
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"])[data-gradient="vivid"] {
    --grad-brand:  linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
    --grad-accent: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
  }
  :root:not([data-theme="light"])[data-gradient="subtle"] {
    --grad-brand:  linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
    --grad-accent: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
  }
}
:root[data-theme="dark"] {
  --brand-hi: var(--brand-lt);
  --on-brand: #0e1116;
  --on-brand-shadow: none;
}
:root[data-theme="dark"],
:root[data-theme="dark"][data-gradient="vivid"],
:root[data-theme="dark"][data-gradient="subtle"] {
  --grad-brand:  linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
  --grad-accent: linear-gradient(180deg, var(--brand-lt) 0%, var(--brand) 100%);
}
/* Same one-stop form here, for the same reason as the light block above. */
:root[data-theme="dark"][data-gradient="none"],
:root:not([data-theme="light"])[data-gradient="none"] {
  --grad-brand:  linear-gradient(var(--brand), var(--brand));
  --grad-accent: linear-gradient(var(--brand), var(--brand));
}