/* ==========================================================================
   THEMING CONVENTION (four light themes + four dark themes)
   --------------------------------------------------------------------------
   Theming is token-first. `:root` below defines every semantic token in its
   LIGHT value; the dark block further down RE-DEFINES those same tokens with
   dark (gb-*) values. Component CSS consumes var(--token) and stays
   theme-agnostic — it flips automatically when the tokens change.

   EIGHT themes. Four light — light (Matcha, with an optional gradient: a
   wash of light behind see-through surfaces, data-wash on <html>;
   matcha-gradient.css), nord-light (Nord Snow Storm),
   basic (after the 2017 LawPay UI: white ground, navy buttons, azure
   accents), letterhead (after a firm engagement letter: bone
   paper, hairline rules, fountain-pen blue) — and four dark — dark
   (Gruvbox), cosmic (Nord), kosmic (Nord under the sky), everforest.
   The non-Gruvbox darks ARE the dark theme structurally — they share the
   dark token block and every dark structural rule, and only repoint the
   --gb-* ramp (see the blocks after the dark block). So any "dark" rule is
   scoped to ALL FOUR:
   `:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"])`.
   The non-Matcha lights are light structurally: they inherit every :root
   default and their blocks below only repoint colour tokens; dark
   structural rules never apply. (Retired: sky, kosmos, kosmos-dark —
   theme.js migrates stored settings to light/dark.)

   RULE OF THUMB:
   1. If dark only needs a different *value*, add/repoint a token here. Do NOT
      write a scoped rule.
   2. Only when dark needs a structurally *different rule* (e.g. filled vs
      outline buttons, accent rail vs fill — where the colour moves to a
      different property) add a
      `:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .component`
      block, co-located at the bottom of that component's own CSS file under a
      "Dark mode —" comment. Keep the colour decision in a token, the
      structural rule in the component. Do not start a monolithic dark.css.
   ========================================================================== */

/* The light token set is the default (:root). Tagging any element with
   data-theme="light" re-applies it within that subtree — used to keep a "light
   island" (e.g. the viewer's highlight cards) light inside a dark page. */
:root,
[data-theme="light"] {
  /* Native form controls + scrollbars follow this */
  color-scheme: light;

  /* ==========================================================================
     Design System - Semantic Colors
     These reference the palette.css color definitions
     ========================================================================== */

  /* Tab corner masks */
  --mask-tab-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8,0 L8,8 L0,8 A8,8 0 0,0 8,0 Z' fill='white'/%3E%3C/svg%3E");
  --mask-tab-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0,0 L0,8 L8,8 A8,8 0 0,1 0,0 Z' fill='white'/%3E%3C/svg%3E");

  /* Border radius. --radius-xs was referenced across the app for years but
     never defined — every var(--radius-xs) corner silently rendered square.
     Defined here so those chips and buttons actually round. */
  --radius-xs: 0.25rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* ==========================================================================
     Typography & Text
     ========================================================================== */
  --color-primary: var(--stone-600);
  --color-darker: var(--stone-800);
  --color-muted: var(--stone-500);
  --color-muted-more: var(--stone-400);
  --color-lighter: var(--stone-300);

  /* ==========================================================================
     Links
     ========================================================================== */
  --link: var(--lime-750);
  --link-hover: var(--lime-600);
  /* Brand surfaces (sidebar mark/wordmark, auth monogram) follow the link
     colour unless a theme pins a dedicated ink. */
  --brand-ink: var(--link);
  /* The brand gradient (after the landing page's wordmark, mirrored): it
     leads with the brand ink, the stronger colour, and runs out into a
     second hue each theme picks from its own palette, across the word and
     again across the sparkle. Only that far end is a per-theme decision;
     a theme that sets --brand-grad-to to var(--brand-ink) keeps a flat
     brand. Matcha: the link green into violet, two steps lighter than
     the accent-icon violet so the tail lifts rather than deepens. */
  --brand-grad-from: var(--brand-ink);
  --brand-grad-to: var(--violet-500);

  /* Keyboard focus ring: each theme's accent pulled halfway toward a
     fixed mid-gray (OKLCH mix keeps the hue) — link colours are
     text-inks, too heavy as rings on light grounds and glaring on dark;
     the mix normalizes both directions toward mid-tone. (Relative color
     syntax expressed this more precisely but lacks browser support.)
     Resolves per theme because var(--accent-link) substitutes per
     element. */
  --focus-ring: color-mix(in oklch, var(--accent-link) 50%, oklch(0.62 0 none));
  /* Input focus borders run a step lighter than the keyboard ring — the
     border+inset pair reads heavier than an offset ring, so it gets
     diluted toward the field's own ground. */
  --field-focus: color-mix(in oklch, var(--focus-ring) 65%, var(--input-background));

  /* ==========================================================================
     Backgrounds
     ========================================================================== */
  --background-nav: var(--stone-350);
  --background-body: var(--stone-125);
  --background-subnav: var(--stone-200);
  --background-subnav-contrast: var(--stone-225);
  --background-control: var(--stone-200);
  --background-section: var(--stone-150);

  /* Table headers follow the control surface by default; themes that want
     lighter headers without touching the many other control-surface consumers
     (toolbars, buttons, chips) repoint this alone. */
  --background-th: var(--background-control);
  --background-td: var(--stone-125);
  --background-medium-light: var(--stone-75);
  --background-light: var(--stone-50);
  /* AI chat standalone surface ramp — its own light palette (frame darker than
     the panels on top); the dark values invert it into a proper dark ramp. */
  --ai-frame: var(--stone-300);
  --ai-surface: var(--stone-50);
  --ai-raised: var(--stone-100);
  --past-due-bg: var(--yellow-50);
  /* Due today/tomorrow card wash (dash + overview timeline) — same soft
     yellow-50 family as the past-due surfaces, NOT the stronger --hl-yellow
     text highlight. Dark themes drop the wash for a rail, so no dark value. */
  --due-soon-bg: var(--yellow-50);
  --task-highlight-bg: var(--selected-background);

  /* Warning toast — a soft yellow wash in light mode so it reads against the
     page; the type rail is dropped here (the wash carries the signal). The dark
     block reverts to neutral surfaces and restores the rail. */
  --toast-warning-header-bg: var(--yellow-100);
  --toast-warning-body-bg: var(--yellow-50);
  --toast-warning-rail: 1px solid var(--border-dark);

  /* ==========================================================================
     Navigation
     ========================================================================== */
  --color-nav: var(--color-primary);
  --background-nav-tab-active: var(--background-body);
  --background-subnav-tab-active: var(--background-section);
  /* The detail pages' title-bar/subnav seam; themes with one flat chrome
     surface dissolve it. */
  --subnav-divider: var(--border-medium-dark);

  /* ==========================================================================
     Sidebar
     ========================================================================== */
  --sidebar-width: 11.25rem;
  --sidebar-width-collapsed: 4.5rem;
  --topnav-height: 3.5rem;
  --background-sidebar: var(--stone-200);
  --background-sidebar-hover: var(--stone-225);
  --background-sidebar-active: var(--stone-250);

  /* ==========================================================================
     Buttons
     ========================================================================== */
  --button-primary-background: var(--link);
  --button-primary-color: var(--color-lighter);
  --button-secondary-background: var(--background-section);
  --button-secondary-color: var(--color-primary);
  --button-toolbar: var(--color-primary);
  --btn-secondary-bg: var(--blue-50);
  --btn-success-bg: var(--lime-100);
  --btn-danger-bg: var(--red-100);

  /* ==========================================================================
     Forms & Inputs
     ========================================================================== */
  --input-border: var(--stone-300);
  --input-background: var(--stone-50);
  --input-placeholder: var(--stone-400);

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --border-light: var(--stone-200);
  --border-medium: var(--stone-300);
  --border-medium-dark: var(--stone-350);
  --border-dark: var(--stone-400);
  /* Toolbar buttons follow the medium border by default; themes that want
     more button definition without touching the many other border-medium
     consumers (table grids, hairlines) repoint this alone. */
  --button-border: var(--border-medium);

  /* ==========================================================================
     Selection & Active States
     ========================================================================== */
  --selected-background: var(--violet-150);
  --selected-color: var(--stone-700);
  --selected-border: var(--border-medium-dark);

  /* ==========================================================================
     Status & Feedback
     ========================================================================== */
  --urgent: var(--orange-800);
  --warning: var(--orange-800);
  --success: var(--lime-700);
  --true: var(--lime-700);
  --false: var(--urgent);
  --error: var(--urgent);
  --error-background: var(--orange-100);
  --error-border: var(--urgent);

  /* Semantic status-green chips (citation verification, vetting states in
     the AI chat) — themable, unlike the provider brand badges which stay
     constant. Defaults are Matcha's limes. */
  --status-green-bg: var(--lime-100);
  --status-green-ink: var(--lime-800);
  --status-green-line: var(--lime-300);
  --status-green-hover: var(--lime-200);

  /* ==========================================================================
     Labels & Badges
     ========================================================================== */
  --label-gray: var(--background-control);
  --label-green: var(--lime-100);
  --label-orange: var(--orange-100);
  --label-purple: var(--violet-100);
  --label-red: var(--red-100);
  --label-yellow: var(--yellow-100);

  /* ==========================================================================
     Icons
     ========================================================================== */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --icon-muted-more: var(--color-muted-more);
  --accent-link: var(--link);
  --icon-violet: var(--violet-700);
  --icon-violet-muted: var(--violet-600);
  --icon-yellow: var(--yellow-700);
  --add: var(--link);

  /* ==========================================================================
     Row Highlights
     ========================================================================== */
  --hl-gray: var(--background-control);
  --hl-blue: var(--blue-100);
  --hl-slate: var(--slate-100);
  --hl-green: var(--lime-100);
  --hl-orange: var(--orange-100);
  --hl-violet: var(--violet-100);
  --hl-red: var(--red-100);
  --hl-yellow: var(--yellow-100);

  /* Row washes — the same hues a step lighter, for tables that carry the colour
     across a whole row (the timeline). The --hl-* fills above are sized for
     small areas — text marks, chips, a button state — and over five columns
     that much tint reads heavy. Derived off each fill rather than pinned to a
     ramp step, so the tinted light themes soften by the same amount as Matcha.
     The darks paint a rail instead of a fill and never use these. */
  --hl-wash-gray: color-mix(in oklch, var(--hl-gray) 50%, var(--background-td));
  --hl-wash-blue: color-mix(in oklch, var(--hl-blue) 50%, var(--background-td));
  --hl-wash-slate: color-mix(in oklch, var(--hl-slate) 50%, var(--background-td));
  --hl-wash-green: color-mix(in oklch, var(--hl-green) 50%, var(--background-td));
  --hl-wash-orange: color-mix(in oklch, var(--hl-orange) 50%, var(--background-td));
  --hl-wash-violet: color-mix(in oklch, var(--hl-violet) 50%, var(--background-td));
  --hl-wash-red: color-mix(in oklch, var(--hl-red) 50%, var(--background-td));
  --hl-wash-yellow: color-mix(in oklch, var(--hl-yellow) 50%, var(--background-td));

}

/* ==========================================================================
   Matcha's gradient — Matcha with weather: morning mist over a tea field.
   Adapted from cpl's Matcha Lavender (theme-matcha-lavender.css). On when
   Appearance's Gradient is cool or warm (data-wash on <html>, set before
   first paint in base.html and kept in step by theme.js).

   It IS Matcha: every :root token stands, and this block only
   adds the light and repoints the colours that have to hold against it.
   The page is a still wash of light that falls from the top left carrying
   the tea's green, and where it runs out the shade is lavender. The chrome
   (top bar, sidebar, detail headers, subnavs) is a thin stone veil over that
   wash; the cards and tables are the card colour taken halfway to white and
   let through, so the wash shows behind them. Text, borders and selection
   go a touch darker to hold on the see-through surfaces. The rules that put
   all this on the page are in matcha-gradient.css.
   ========================================================================== */
[data-theme="light"][data-wash] {
  /* ------------------------------------------------------------------
     The light. Turn these dials and every surface follows.
     ------------------------------------------------------------------ */
  --mist-light: var(--lime-100);
  --mist-shade: var(--violet-200);

  /* The sun: the warm yellow where the light breaks through, a little
     left of centre, around the middle of the page */
  --mist-sun: var(--yellow-150);

  /* The page (the warm gradient): the sun breaking through in the
     middle, green along the top left and low on the left, lavender high
     on the right and gathering in the far corner, a little sea-green
     underfoot. The top is the strongest, so the bar over it runs green to
     lavender. The sun is the top layer, so it glows over the colours it
     meets. */
  --mist-wash:
    radial-gradient(75vmax 32vmax at 45% 52%, color-mix(in oklab, var(--mist-sun) 50%, transparent), transparent 75%),
    radial-gradient(55vmax 22vmax at 15% 0%, color-mix(in oklab, var(--mist-light) 90%, transparent), transparent 70%),
    radial-gradient(60vmax 45vmax at 5% 60%, color-mix(in oklab, var(--mist-light) 95%, transparent), transparent 70%),
    radial-gradient(50vmax 40vmax at 95% 10%, color-mix(in oklab, var(--mist-shade) 85%, transparent), transparent 70%),
    radial-gradient(60vmax 50vmax at 90% 100%, color-mix(in oklab, var(--mist-shade) 75%, transparent), transparent 70%),
    radial-gradient(55vmax 40vmax at 35% 110%, color-mix(in oklab, var(--emerald-100) 85%, transparent), transparent 70%);

  /* Grain over the wash: tone-on-tone, the ink at this strength */
  --mist-ink: var(--stone-700);
  --mist-grain: 0.07;

  /* The sheens, for surfaces that float over the page (dialogs, menus, the
     phone drawer): a pool of light in the lit corner and a pool of shade
     in the far one, each a fixed size so a tall dialog is lit like a short
     one. Soft for menus, plain for dialogs and the drawer. */
  --mist-sheen-soft:
    radial-gradient(24rem 12rem at 0% 0%, color-mix(in oklab, var(--mist-light) 24%, transparent), transparent),
    radial-gradient(20rem 10rem at 100% 100%, color-mix(in oklab, var(--mist-shade) 16%, transparent), transparent);
  --mist-sheen:
    radial-gradient(48rem 18rem at 0% 0%, color-mix(in oklab, var(--mist-light) 42%, transparent), transparent),
    radial-gradient(40rem 16rem at 100% 100%, color-mix(in oklab, var(--mist-shade) 26%, transparent), transparent);

  /* Shadows take the light's colour too: green-gray, not black */
  --mist-shadow: color-mix(in oklab, var(--lime-950) 28%, transparent);
  --mist-card-shadow: color-mix(in oklab, var(--lime-950) 16%, transparent);

  /* The chrome is the wash carried on up, a step darker: a thin stone veil
     over the page's own light. Hover lays a second veil over it. */
  --mist-veil: color-mix(in oklab, var(--stone-600) 13%, transparent);
  --mist-veil-hover: color-mix(in oklab, var(--stone-600) 9%, transparent);

  /* Cards carry no light of their own: they are the card colour taken
     halfway to white, let through so the wash shows behind them. Body text
     keeps better than 6:1 against them; the cards stop reading as panels,
     somewhere under 60%, long before the text suffers. */
  --mist-card-opacity: 65%;
  --mist-card: color-mix(in srgb, color-mix(in oklab, var(--background-section) 50%, white) var(--mist-card-opacity), transparent);

  /* ------------------------------------------------------------------
     Matcha's tokens, adjusted to hold against the light
     ------------------------------------------------------------------ */

  /* Text a touch darker than Matcha's, halfway to the next stone */
  --color-primary: color-mix(in oklab, var(--stone-600) 50%, var(--stone-700));

  /* The selection lavender a step darker than Matcha's, to hold on the
     see-through cards and the veiled bar */
  --selected-background: color-mix(in oklab, var(--violet-100) 35%, var(--violet-200));

  /* Borders a touch darker, so the lines in the cards hold against the
     wash coming through them */
  --border-medium: color-mix(in oklab, var(--stone-300) 75%, var(--stone-400));
  --border-medium-dark: color-mix(in oklab, var(--stone-350) 80%, var(--stone-400));
  --border-dark: color-mix(in oklab, var(--stone-400) 85%, var(--stone-500));
  --input-border: var(--border-medium);

  /* The chrome takes the veil */
  --background-sidebar: var(--mist-veil);
  --background-sidebar-hover: var(--mist-veil-hover);
  --background-subnav: var(--mist-veil);

  /* Table cells clear so the table's card shows through; the heads are
     the control colour, let through as the cards are, or the head would
     sit on the card as a solid band. The row washes follow the clear
     cells and come out as tints over the card. */
  --background-td: transparent;
  --background-th: color-mix(in srgb, var(--background-control) var(--mist-card-opacity), transparent);

  /* The due and past-due yellow, let through as the cards are */
  --due-soon-bg: color-mix(in srgb, var(--yellow-50) 80%, transparent);
  --past-due-bg: var(--due-soon-bg);
}

/* The cool gradient: the same light without the sun. Green and lavender
   only, as the wash was before the sun was added. */
[data-theme="light"][data-wash="cool"] {
  --mist-wash:
    radial-gradient(55vmax 22vmax at 15% 0%, color-mix(in oklab, var(--mist-light) 90%, transparent), transparent 70%),
    radial-gradient(60vmax 45vmax at 5% 60%, color-mix(in oklab, var(--mist-light) 95%, transparent), transparent 70%),
    radial-gradient(50vmax 40vmax at 95% 10%, color-mix(in oklab, var(--mist-shade) 85%, transparent), transparent 70%),
    radial-gradient(60vmax 50vmax at 90% 100%, color-mix(in oklab, var(--mist-shade) 75%, transparent), transparent 70%),
    radial-gradient(55vmax 40vmax at 35% 110%, color-mix(in oklab, var(--emerald-100) 85%, transparent), transparent 70%);
}

/* ==========================================================================
   Nord Light — the second LIGHT theme, cosmic's daytime counterpart.

   Snow Storm surfaces (nord4-6 plus the interpolated --nord-snow-* steps in
   palette.css), Polar Night text, frost deep-blue links and primary buttons,
   and the signature frost cyan as the selection wash. The frost family is
   deliberately cool everywhere; the warmth comes from aurora, placed only
   where meaning lives — status inks, Add, the yellow icons, and the
   highlight/label tints (aurora pulled to ink weight or diluted to snow
   tints in palette.css, since canonical aurora is sized for dark grounds).
   Structurally it IS the light theme — it inherits every :root token and
   only repoints colours; dark structural rules never apply.
   ========================================================================== */
[data-theme="nord-light"] {
  color-scheme: light;

  /* Typography & Text — the Polar Night ramp over snow */
  --color-primary: var(--nord2);
  --color-darker: var(--nord0);
  --color-muted: var(--nord3-bright);
  --color-muted-more: var(--nord-gray);
  --color-lighter: var(--nord4);

  /* Links — a step below nord10 for ink-level contrast, lifting to the
     canonical frost deep blue on hover */
  --link: var(--nord10-deep);
  --link-hover: var(--nord10);
  /* Brand gradient — the frost link blue into the aurora purple at ink
     weight (the accent-icon hue, as Matcha runs into its violet) */
  --brand-grad-to: var(--nord15-ink);

  /* Backgrounds — the Snow Storm ladder: nord6 body and table cells under a
     shared nord5 chrome tier, nord4 nav */
  --background-nav: var(--nord4);
  --background-body: var(--nord6);
  --background-subnav: var(--nord5);
  --background-subnav-contrast: var(--nord4);
  --background-section: var(--nord5);
  --background-th: var(--nord5);
  --background-control: var(--nord5);
  --background-td: var(--nord6);
  --background-medium-light: var(--nord-snow-mid);
  --background-light: var(--nord-snow-bright);
  --ai-frame: var(--nord4);
  --ai-surface: var(--nord-snow-bright);
  --ai-raised: var(--nord-snow-mid);

  /* Sidebar */
  --background-sidebar: var(--nord5);
  --background-sidebar-hover: var(--nord4);
  --background-sidebar-active: var(--nord-snow-dark);

  /* Buttons — solid frost blue under near-white snow */
  --button-primary-background: var(--nord10);
  --button-primary-color: var(--nord-snow-bright);

  /* Forms & Inputs */
  --input-border: var(--nord-snow-dark);
  --input-background: var(--nord-snow-bright);
  --input-placeholder: var(--nord-gray);

  /* Borders — cool polar grays in place of stone, the whole ramp one
     step darker than the surface ladder (2026-07-21: the surface-step
     values read faint as edges — tables, nav seams, and toolbar frames
     all rise together) */
  --border-light: var(--nord4);
  --border-medium: var(--nord-snow-dark);
  --border-medium-dark: var(--nord4-dim);
  --border-dark: var(--nord3-bright);

  /* Selection — the frost cyan wash under Polar Night text. The active
     border gets a real frost hue, dimmed toward the snow ground: full
     nord7 read sharp as an outline on the wash. Toolbar buttons take the
     mid border step for the same reason (nord4-dim is the general
     medium-dark border and stays put — cosmic's text ramp shares it). */
  --selected-background: var(--nord-frost-tint);
  --selected-color: var(--nord1);
  --selected-border: var(--nord7-dim);
  --button-border: var(--nord4-mid);

  /* Accent icons (filter, active sort, new-note/checklist badges) — aurora
     purple at ink weight. The 6yan ink blended into the gray-blue canvas;
     mauve is the one hue nothing else on screen uses, so "on" actually
     reads. */
  --icon-violet: var(--nord15-ink);
  --icon-violet-muted: var(--nord15);
  --icon-yellow: var(--nord13-ink);

  /* Status — aurora at ink weight (--false/--error/--error-border follow
     --urgent from :root automatically) */
  --urgent: var(--nord11-ink);
  --warning: var(--nord12-ink);
  --success: var(--nord14-ink);
  --true: var(--nord14-ink);
  --error-background: var(--nord11-tint);

  /* Add — aurora green (:root points it at --link, which is blue here) */
  --add: var(--nord14-ink);

  /* Past-due / due-soon washes and the warning toast — aurora yellow
     diluted to snow */
  --past-due-bg: var(--nord13-wash);
  --due-soon-bg: var(--nord13-wash);
  --toast-warning-header-bg: var(--nord13-tint);
  --toast-warning-body-bg: var(--nord13-wash);

  /* Buttons — success/danger fills on the aurora tints; Cancel takes the
     frost wash instead of inheriting Matcha's blue-50 */
  --btn-success-bg: var(--nord14-tint);
  --btn-danger-bg: var(--nord11-tint);
  --btn-secondary-bg: var(--nord-frost-tint);

  /* Row highlights — aurora (and frost blue) as snow tints; gray/slate
     inherit the cool defaults, which already read Nordic */
  --hl-blue: var(--nord9-tint);
  --hl-green: var(--nord14-tint);
  --hl-orange: var(--nord12-tint);
  --hl-violet: var(--nord15-tint);
  --hl-red: var(--nord11-tint);
  --hl-yellow: var(--nord13-tint);

  /* Labels & badges — the same aurora tints (label-gray follows control) */
  --label-green: var(--nord14-tint);
  --label-orange: var(--nord12-tint);
  --label-purple: var(--nord15-tint);
  --label-red: var(--nord11-tint);
  --label-yellow: var(--nord13-tint);
}

/* ==========================================================================
   Basic — a light theme after the 2017 LawPay UI (palette sampled
   from the reference screenshot; the --oxford-* palette keeps its
   source name, as the nord and gb palettes do). Formerly
   data-theme="oxford"; theme.js migrates stored settings.

   White content ground under a pale mist chrome tier; the window-chrome
   slate serves as the dark neutral (menu icons, outline borders). Deep
   navy primary buttons, steel-blue links darkening to navy on hover,
   azure accent icons, the 'Paid' green on success. Structurally a light
   theme: token-only block, no scoped rules.
   ========================================================================== */
[data-theme="basic"] {
  color-scheme: light;

  /* Typography & Text — slate over white */
  --color-primary: var(--oxford-slate);
  --color-darker: var(--oxford-slate-dark);
  --color-muted: var(--oxford-gray);
  --color-muted-more: var(--oxford-gray-soft);
  --color-lighter: var(--oxford-line-dark);

  /* Links — steel blue, deepening to the brand navy on hover */
  --link: var(--oxford-steel);
  --link-hover: var(--oxford-navy);

  /* Backgrounds — white ground and cells under a mist chrome tier.
     --background-nav is not a bar surface in this app (it colours menu/dot
     icons, outline-button borders, dropdown click-flashes) — the chrome
     slate suits that neutral. Nav/sidebar text inherits the slate ink. */
  --background-nav: var(--oxford-chrome);
  --background-body: var(--oxford-paper);
  --background-subnav: var(--oxford-mist);
  --background-subnav-contrast: var(--oxford-line-dark);
  --background-section: var(--oxford-mist-dark);
  --background-th: var(--oxford-mist);
  --background-control: var(--oxford-mist-dark);
  --background-td: var(--oxford-paper);
  --background-medium-light: var(--oxford-mist);
  --background-light: var(--oxford-mist);
  --ai-frame: var(--oxford-line);
  --ai-surface: var(--oxford-paper);
  --ai-raised: var(--oxford-mist);

  /* Sidebar — white like the reference, labels in the muted gray */
  --background-sidebar: var(--oxford-mist);
  --background-sidebar-hover: var(--oxford-mist-dark);
  --background-sidebar-active: var(--oxford-gray-select);

  /* Buttons — the SEND QUICK BILL navy under white text */
  --button-primary-background: var(--oxford-navy);
  --button-primary-color: var(--oxford-paper);

  /* Forms & Inputs */
  --input-border: var(--oxford-line-dark);
  --input-background: var(--oxford-paper);
  --input-placeholder: var(--oxford-gray-soft);

  /* Borders — cool hairlines */
  --border-light: var(--oxford-line);
  --border-medium: var(--oxford-line);
  --border-medium-dark: var(--oxford-line-dark);
  --border-dark: var(--oxford-gray-soft);

  /* Selection — a darker executive gray under the heading slate; azure
     survives only on the accent icons (the sober revision) */
  --selected-background: var(--oxford-gray-select);
  --selected-color: var(--oxford-slate-dark);

  /* Active CONTROLS (toggled toolbar buttons, mode pills, active dropdown
     items, sidebar active, calendar view buttons) fill with the rail's
     azure under inverted text — the reference UI's signature. Row/item
     SELECTION stays on the quiet --selected-* grays so selected table rows
     keep their readable content. Structural rules co-located in
     interface.css / sidebar.css / apps/calendar.css. The subnav tabs
     (matter + case pages) share this fill via detail.css. */
  /* One emphasis language for every active/selected control — nav
     items, subnav tabs, toolbar toggles, mode pills, calendar view
     buttons: the azure wash inside a rail-azure border under slate
     text. (The azure-ink fill with inverted text, and later a pill-rail
     experiment, both retired 2026-07-23.) */
  --control-active-bg: var(--oxford-azure-tint);
  --control-active-line: color-mix(
    in oklch,
    var(--oxford-azure) 80%,
    var(--oxford-paper)
  );
  --control-active-color: var(--oxford-slate-dark);

  /* The brand (sidebar kappa/wordmark, auth monogram) anchors in the deep
     navy — one job per blue: navy = brand + primary actions, steel =
     links, azure = active state. */
  --brand-ink: var(--oxford-navy);
  /* Brand gradient — all blue: the brand navy lifting into the
     active-state azure */
  --brand-grad-to: var(--oxford-azure);

  /* Accent icons (filter, active sort, badges) — violet, the one hue no
     other Oxford role uses; the azure blended into the blue family and
     the sort chevrons vanished (green would read as money here) */
  --icon-violet: var(--violet-600);
  --icon-violet-muted: var(--violet-400);

  /* Status — the 'Paid' green carries success; Add follows it. The
     functional accents run at the azure's intensity (vivid green, true
     yellow icons, orange-700 urgency, brighter button washes) so they
     hold their own beside the filled actives. */
  --success: var(--oxford-green-ink);
  --true: var(--oxford-green-ink);
  /* Footer fills — back on the house light-tint/dark-text pattern
     (the solid inverted fills dated from the azure-actives era, retired
     2026-07-23); the derived borders intensify each fill's own hue. */
  --btn-success-bg: var(--status-green-bg);
  --btn-danger-bg: var(--hl-red);
  --btn-secondary-bg: var(--oxford-azure-tint);

  /* Status-green chips take the theme's own green family */
  --status-green-bg: oklch(0.936 0.036 163);
  --status-green-ink: oklch(0.474 0.1143 155.8);
  --status-green-line: oklch(0.818 0.101 160.7);
  --status-green-hover: oklch(0.906 0.055 163);

  /* Row highlights, labels, and the soft washes — Oxford's own cool
     tints on white (the inherited Matcha 100-tints were its last
     residue; violet stays inherited, it IS the accent family) */
  --hl-blue: oklch(0.931 0.026 239);
  --hl-green: var(--status-green-bg);
  --hl-orange: oklch(0.931 0.043 65);
  --hl-red: oklch(0.92 0.036 22);
  --hl-yellow: oklch(0.943 0.054 92);
  --label-green: var(--status-green-bg);
  --label-orange: oklch(0.931 0.043 65);
  --label-red: oklch(0.92 0.036 22);
  --label-yellow: oklch(0.943 0.054 92);
  --past-due-bg: oklch(0.966 0.036 93);
  --due-soon-bg: oklch(0.966 0.036 93);
  --toast-warning-header-bg: oklch(0.943 0.054 92);
  --toast-warning-body-bg: oklch(0.966 0.036 93);
  --error-background: oklch(0.931 0.043 65);
  --add: var(--oxford-green);
  --icon-yellow: var(--yellow-600);
  --urgent: var(--orange-700);
  --warning: var(--orange-700);
}

/* ==========================================================================
   Letterhead — the fourth LIGHT theme, after a firm engagement
   letter: one warm stone axis (hue 68–100), hairline rules as the
   only graphic device, links and selection in the letter's own inks
   (soft-ink links, chip-fill selection), ink-filled primary buttons.
   Fountain-pen blue recedes to the calendar, the charts, and the blue
   highlight class. Functional colors survive as quiet warm-shifted ink
   stamps at roughly half Matcha's chroma. Structurally a light theme:
   token-only block, no scoped rules — the default fill-based active
   idiom IS cl's chip.
   ========================================================================== */
[data-theme="letterhead"] {
  color-scheme: light;

  /* Typography & Text — cl's ink ramp over bone paper */
  --color-primary: var(--lh-ink);
  --color-darker: var(--lh-press);
  --color-muted: var(--lh-ink-soft);
  --color-muted-more: var(--lh-ink-faint);
  --color-lighter: var(--lh-rule);

  /* Links — the letter's own soft ink, darkening to full ink on
     hover (cl's topbar idiom). --brand-ink, --accent-link,
     --focus-ring, --field-focus derive from --link in :root and
     follow into the ink family — blue recedes to the calendar,
     charts, and the blue highlight class */
  --link: var(--lh-ink-soft);
  --link-hover: var(--lh-ink);
  /* Brand gradient — the letter's soft ink warming into old-gold ink */
  --brand-grad-to: var(--lh-gold-ink);

  /* Backgrounds — paper ground, field chrome, chip actives */
  --background-nav: var(--lh-rule);
  --background-body: var(--lh-paper);
  --background-subnav: var(--lh-field);
  --background-subnav-contrast: var(--lh-chip);
  --background-control: var(--lh-field);
  --background-section: var(--lh-paper-dim);
  --background-th: var(--lh-paper-dim);
  --background-td: var(--lh-paper);
  --background-medium-light: var(--lh-mid);
  --background-light: var(--lh-bright);
  --ai-frame: var(--lh-chip);
  --ai-surface: var(--lh-bright);
  --ai-raised: var(--lh-paper);
  --past-due-bg: var(--lh-amber-wash);
  --due-soon-bg: var(--lh-amber-wash);
  --toast-warning-header-bg: var(--lh-amber-tint);
  --toast-warning-body-bg: var(--lh-amber-wash);

  /* Navigation — actives keep the :root fill idiom (cl's chip); the
     subnav tab wears the chip itself, divided by the hairline */
  --background-subnav-tab-active: var(--lh-chip);
  --subnav-divider: var(--lh-rule);

  /* Sidebar — the field tier, chip marks current */
  --background-sidebar: var(--lh-field);
  --background-sidebar-hover: var(--lh-field-dim);
  --background-sidebar-active: var(--lh-chip);

  /* Buttons — cl buttons are INK, not blue: blue stays reserved for
     clickable text, ink means "press here" */
  --button-primary-background: var(--lh-ink);
  --button-primary-color: var(--lh-on-ink);
  --btn-secondary-bg: var(--lh-blue-wash);
  --btn-success-bg: var(--lh-green-tint);
  --btn-danger-bg: var(--lh-red-tint);

  /* Forms & Inputs — cl's signature shaded wells: field darker than
     paper, defined by the rule hairline */
  --input-border: var(--lh-rule);
  --input-background: var(--lh-field);
  --input-placeholder: var(--lh-ink-faint);

  /* Borders — the rule carries the medium step; the ladder warms
     around it */
  --border-light: var(--lh-chip);
  --border-medium: var(--lh-rule);
  --border-medium-dark: var(--lh-rule-dark);
  --border-dark: var(--lh-rule-strong);

  /* Selection — the stone ladder, a shade deeper than the chip so it
     stands apart from the "you are here" fills around it */
  --selected-background: var(--lh-chip-dim);
  --selected-color: var(--lh-press);
  --selected-border: var(--lh-rule-dark);

  /* Status — warm-muted inks (--false/--error/--error-border follow
     --urgent from :root) */
  --urgent: var(--lh-red-ink);
  --warning: var(--lh-amber-ink);
  --success: var(--lh-green-ink);
  --true: var(--lh-green-ink);
  --error-background: var(--lh-red-tint);
  --status-green-bg: var(--lh-green-tint);
  --status-green-ink: var(--lh-green-ink);
  --status-green-line: var(--lh-green-line);
  --status-green-hover: var(--lh-green-hover);

  /* Labels — the paper tints (label-gray follows the control tier) */
  --label-green: var(--lh-green-tint);
  --label-orange: var(--lh-orange-tint);
  --label-purple: var(--lh-plum-tint);
  --label-red: var(--lh-red-tint);
  --label-yellow: var(--lh-amber-tint);

  /* Icons — plum is the one hue no other Letterhead role uses, so
     "on" reads; Add must stay green (:root derives it from --link,
     which is blue here) */
  --icon-violet: var(--lh-plum-ink);
  --icon-violet-muted: var(--lh-plum-soft);
  --icon-yellow: var(--lh-gold-ink);
  --add: var(--lh-green-ink);

  /* Row highlights — the tints; gray inherits the warm control tier */
  --hl-blue: var(--lh-blue-wash);
  --hl-slate: var(--lh-slate-tint);
  --hl-green: var(--lh-green-tint);
  --hl-orange: var(--lh-orange-tint);
  --hl-violet: var(--lh-plum-tint);
  --hl-red: var(--lh-red-tint);
  --hl-yellow: var(--lh-amber-tint);
}

/* ==========================================================================
   Utility Classes - Highlights
   ========================================================================== */

.hl-blue { background: var(--hl-blue) !important; }
.hl-slate { background: var(--hl-slate) !important; }
.hl-gray { background: var(--hl-gray) !important; }
.hl-green { background: var(--hl-green) !important; }
.hl-orange { background: var(--hl-orange) !important; }
.hl-violet { background: var(--hl-violet) !important; }
.hl-purple { background: var(--hl-violet) !important; }
.hl-red { background: var(--hl-red) !important; }
.hl-yellow { background: var(--hl-yellow) !important; }

/* Dark mode — bright "line" colour per highlight class, for contexts that show
   the colour as an accent (underline / rail / swatch) rather than a muddy dark
   fill. Harmless on the generic .hl-* fills, which ignore it. */
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .hl-yellow { --hl-line: var(--yellow-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .hl-red    { --hl-line: var(--red-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .hl-orange { --hl-line: var(--orange-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .hl-green  { --hl-line: var(--lime-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) .hl-blue   { --hl-line: var(--blue-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) :is(.hl-violet, .hl-purple) { --hl-line: var(--violet-400); }
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) :is(.hl-slate, .hl-gray) { --hl-line: var(--slate-400); }

/* Dark mode — any table row flagged with a highlight colour shows it as a bright
   left rail on the first cell, never a full-row fill (dark fills go muddy and
   dominate). Covers facts/timeline, calendar & event rows, dash totals, etc. */
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) tr[class*="hl-"],
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) tr[class*="hl-"] > td {
  background: transparent !important;
}
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) tr[class*="hl-"] > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--hl-line);
}

.past-due td { background: var(--past-due-bg); }

/* ==========================================================================
   Utility Classes - Text
   ========================================================================== */

.text-muted {
  color: var(--color-muted) !important;
}

/* ==========================================================================
   Utility Classes - Status
   ========================================================================== */

.true-bool {
  color: var(--true);
}

.false-bool {
  color: var(--false);
}

.money-positive {
  color: var(--success) !important;
}

/* ==========================================================================
   Dark theme — Gruvbox, a Hojicha-inspired warm palette
   Deepest base is neutral; surface lifts, text, and borders carry warmth
   (low-chroma tan/brown hues, 48–82°). Accent green shifts from cool lime
   to a softer yellow-green (~138°) for the Gruvbox-aqua feel.
   The bootstrap script in base.html resolves "auto" to either "light" or
   "dark" before paint, so CSS only handles the two concrete states.
   ========================================================================== */
:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"]) {
  /* Native form controls (radios, checkboxes) + scrollbars render dark */
  color-scheme: dark;

  /* Warm grays — neutral deep base, warming as it lifts */
  --gb-dark:      oklch(0.277 0     263);
  --gb-dark-soft: oklch(0.311 0.003  48);
  --gb-dark1:     oklch(0.344 0.007  48);
  --gb-dark2:     oklch(0.411 0.011  52);
  --gb-dark3:     oklch(0.482 0.018  61);
  --gb-dark4:     oklch(0.551 0.023  63);

  /* Warm creams for text */
  --gb-light:  oklch(0.956 0.055 96);
  --gb-light3: oklch(0.756 0.041 82);
  --gb-light4: oklch(0.690 0.035 76);
  --gb-gray:   oklch(0.619 0.029 67);

  /* Yellow-green accents (Gruvbox aqua family) */
  --gb-bright-aqua: oklch(0.756 0.108 138);
  --gb-aqua:        oklch(0.645 0.094 145);
  --gb-faded-aqua:  oklch(0.534 0.082 155);

  /* Status accents */
  --gb-bright-red:    oklch(0.660 0.217  30);
  --gb-bright-orange: oklch(0.731 0.182  52);
  --gb-bright-green:  oklch(0.765 0.158 111);
  --gb-bright-purple: oklch(0.705 0.098   2);
  --gb-bright-yellow: oklch(0.832 0.159  83);

  /* Typography & Text */
  --color-primary: var(--gb-light4);
  --color-darker: var(--gb-light);
  --color-muted: var(--gb-gray);
  --color-muted-more: var(--gb-dark4);
  --color-lighter: var(--gb-light);

  /* Links */
  --link: var(--gb-bright-aqua);
  --link-hover: var(--gb-aqua);
  /* Brand gradient — the link accent into the ramp's yellow; cosmic and
     everforest follow by repointing --gb-bright-yellow */
  --brand-grad-to: var(--gb-bright-yellow);

  /* Backgrounds */
  --background-nav: var(--gb-dark-soft);
  --background-body: var(--gb-dark);
  --background-subnav: var(--gb-dark1);
  --background-subnav-contrast: var(--gb-dark2);
  --background-control: var(--gb-dark1);
  --background-section: var(--gb-dark1);
  --background-td: var(--gb-dark);
  --background-medium-light: var(--gb-dark-soft);
  --background-light: var(--gb-dark-soft);
  /* AI chat surface ramp — frame darkest, panels lift above it. */
  --ai-frame: var(--gb-dark);
  --ai-surface: var(--gb-dark-soft);
  --ai-raised: var(--gb-dark1);
  /* Dark mode signals task state with a left accent rail, not a row fill: a small
     saturated bar carries the hue without touching the elevation ladder or cell grid.
     Fills are neutralised to the normal cell background; the rail tokens do the work. */
  --past-due-bg: var(--background-td);
  --task-highlight-bg: var(--background-td);
  --past-due-rail: oklch(0.60 0.17 358);        /* rose-pink — persistent "past due" */
  --task-highlight-rail: oklch(0.64 0.19 293);  /* violet — transient "recently changed" */

  /* Warning toast keeps the neutral surfaces and the orange rail in dark, where
     the rail already reads well. */
  --toast-warning-header-bg: var(--background-section);
  --toast-warning-body-bg: var(--background-light);
  --toast-warning-rail: 4px solid var(--warning);

  /* Navigation */
  --background-nav-tab-active: var(--background-body);
  --background-subnav-tab-active: var(--gb-dark2);  /* modest one-step lift above the surface */

  /* Sidebar */
  --background-sidebar: var(--gb-dark1);
  --background-sidebar-hover: var(--gb-dark2);
  --background-sidebar-active: var(--gb-dark2);  /* match the hover fill; border + text mark "active" */

  /* Buttons */
  --button-primary-background: var(--gb-faded-aqua);
  --button-primary-color: var(--gb-light);
  --button-secondary-background: var(--background-section);
  --button-secondary-color: var(--gb-light4);
  --button-toolbar: var(--gb-light3);
  --btn-secondary-bg: var(--gb-dark2);
  --btn-success-bg: oklch(0.405 0.096 138);
  --btn-danger-bg: var(--red-900);

  /* Forms & Inputs — inset well effect (input bg distinct from container) */
  --input-border: var(--gb-dark4);
  --input-background: var(--gb-dark-soft);
  --input-placeholder: var(--gb-dark4);

  /* Borders & Dividers */
  --border-light: var(--gb-dark1);
  --border-medium: var(--gb-dark2);
  --border-medium-dark: var(--gb-dark3);
  --border-dark: var(--gb-dark4);

  /* Selection & Active States */
  --selected-background: var(--background-control);
  --selected-color: var(--gb-bright-purple);
  --selected-border: var(--gb-dark3);

  /* Status & Feedback */
  --urgent: var(--gb-bright-orange);
  --warning: var(--gb-bright-orange);
  --success: var(--gb-bright-green);
  --true: var(--gb-bright-green);
  --false: var(--urgent);
  --error: var(--urgent);
  --error-background: var(--red-950);
  --error-border: var(--urgent);

  /* Labels & Badges (mid-dark tints, readable under cream text) — still used as
     fills for text highlights in the case viewer (ai.css / highlights.css). */
  --label-gray: var(--gb-dark1);
  --label-green: var(--lime-950);
  --label-orange: var(--orange-950);
  --label-purple: var(--violet-900);
  --label-red: var(--red-950);
  --label-yellow: var(--yellow-950);
  /* Outline pill line colours — for badge/label chips the hue lives in the
     border + text instead of a fill (see badges.css). */
  --label-blue-line: var(--blue-400);
  --label-gray-line: var(--color-darker);
  --label-green-line: var(--green-400);
  --label-lime-line: var(--lime-400);
  --label-orange-line: var(--orange-400);
  --label-purple-line: var(--violet-400);
  --label-red-line: var(--red-400);
  --label-yellow-line: var(--yellow-400);

  /* Icons */
  --icon-default: var(--color-primary);
  --icon-muted: var(--color-muted);
  --accent-link: var(--link);
  --icon-violet: var(--gb-bright-purple);
  --icon-violet-muted: var(--violet-400);
  --icon-yellow: var(--gb-bright-orange);
  --add: var(--link);

  /* Row Highlights (dark tints) */
  --hl-gray: var(--gb-dark2);
  --hl-blue: var(--blue-950);
  --hl-slate: var(--gb-dark1);
  --hl-green: var(--lime-950);
  --hl-orange: var(--orange-950);
  --hl-violet: var(--violet-950);
  --hl-red: var(--red-950);
  --hl-yellow: oklch(0.31 0.075 92);  /* true-yellow hue so it reads mustard, not the red-brown of yellow-950 */
}

/* ==========================================================================
   Cosmic — the dark theme, on the Nord palette.

   Cosmic IS the dark theme structurally: it shares the entire token mapping
   above and every co-located `:is([data-theme="dark"], [data-theme="cosmic"], [data-theme="kosmic"], [data-theme="everforest"])`
   rule. The ONLY thing it changes is the underlying ramp — the --gb-* tokens
   are repointed from Gruvbox to Nord. Because the semantic tokens above resolve
   var(--gb-*) per element, swapping the ramp re-skins the whole UI to Nord.
   (The --gb-* names are kept, not renamed, so the shared structural rules that
   reference them directly — buttons, flatpickr, calendar — still resolve here.)
   ========================================================================== */
:is([data-theme="cosmic"], [data-theme="kosmic"]) {
  /* Polar Night — deep base, lifting */
  --gb-dark:      var(--nord0);
  --gb-dark-soft: var(--nord0-soft);
  --gb-dark1:     var(--nord1);
  --gb-dark2:     var(--nord2);
  --gb-dark3:     var(--nord3);
  --gb-dark4:     var(--nord3-bright);

  /* Snow Storm — text */
  --gb-light:  var(--nord6);
  --gb-light3: var(--nord4);
  --gb-light4: var(--nord4-dim);
  --gb-gray:   var(--nord-gray);

  /* Frost — accent family (was the Gruvbox aqua family) */
  --gb-bright-aqua: var(--nord8);
  --gb-aqua:        var(--nord9);
  --gb-faded-aqua:  var(--nord10);

  /* Aurora — status accents */
  --gb-bright-red:    var(--nord11);
  --gb-bright-orange: var(--nord12);
  --gb-bright-green:  var(--nord14);
  --gb-bright-purple: var(--nord15);
  --gb-bright-yellow: var(--nord13);

  /* Add stays green (the dark block points it at --link, frost cyan here) */
  --add: var(--gb-bright-green);
}

/* ==========================================================================
   Kosmic — Nord under the landing page's night sky.

   Kosmic is cosmic exactly (it shares the Nord ramp block above and every
   dark rule) with one change: the page ground is the animated sky from
   kosmos.law (kosmic.css + components/kosmic-sky.html), and the surfaces
   that sit flat on it let it through. The ground surfaces (page, tables,
   cards, sidebar) are Polar Night made translucent; table cells go clear so
   a table doesn't stack two washes. Raised surfaces (sections, controls,
   modals, menus) stay opaque, so anything floating over the page is solid.
   ========================================================================== */
[data-theme="kosmic"] {
  --background-body: color-mix(in oklch, var(--nord0) 64%, transparent);
  --background-td: transparent;
  --background-sidebar: color-mix(in oklch, var(--nord1) 85%, transparent);
}

/* ==========================================================================
   Everforest — the forest scheme's dark half, sharing the dark structure.

   Like cosmic, everforest IS the dark theme structurally: it shares the
   entire dark token mapping and every co-located dark rule, and only
   repoints the --gb-* ramp — green-gray surfaces under cream text, the
   signature green as the link/accent family, and the scheme's own soft
   aurora-like status hues.
   ========================================================================== */
[data-theme="everforest"] {
  /* Green-gray surfaces — dimmed base, lifting */
  --gb-dark:      var(--ef-bg-dim);
  --gb-dark-soft: var(--ef-bg0);
  --gb-dark1:     var(--ef-bg1);
  --gb-dark2:     var(--ef-bg2);
  --gb-dark3:     var(--ef-bg3);
  --gb-dark4:     var(--ef-grey0);

  /* Cream text ramp */
  --gb-light:  var(--ef-fg);
  --gb-light3: var(--ef-fg-soft);
  --gb-light4: var(--ef-fg-dim);
  --gb-gray:   var(--ef-grey1);

  /* The signature green as the link/accent family */
  --gb-bright-aqua: var(--ef-green);
  --gb-aqua:        var(--ef-aqua);
  --gb-faded-aqua:  var(--ef-green-deep);

  /* Status accents */
  --gb-bright-red:    var(--ef-red);
  --gb-bright-orange: var(--ef-orange);
  --gb-bright-green:  var(--ef-green);
  --gb-bright-purple: var(--ef-purple);
  --gb-bright-yellow: var(--ef-yellow);
}