/* =============================================================
   Viglet Design System — tokens for a page with no build (VDS216)
   ---------------------------------------------------------------
   Generated from preset.css by scripts/build-tokens.mjs; edit that.
   The --vg-* properties, the dark ground (.dark or [data-theme="dark"])
   and the tones ([data-tone]). Link it before ./site.css.
   ============================================================= */

/* The faces `--font-sans` / `--font-brand` name are `./fonts`, imported
   separately so a preset consumer carries tokens and not 741KB of woff2. */

:root {
  /* UI font — Inter, optimised for screens (dense UI, small sizes). */
  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Brand/display font — Plus Jakarta Sans, reserved for logos and
     display moments (hero headlines, product acronyms). Applied via
     `font-family: var(--font-brand)` on opt-in elements. */
  --font-brand: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", system-ui, sans-serif;
}



:root {
  /* Radii (VDS198) — a closed scale of three. Control is a button's, a field's,
     a badge's and a menu item's; panel is a card's, a dialog's, a popover's and
     every bento surface's; full is a pill's, an avatar's and the state dot's.
     The radius keys above all land on the first two, where they once were
     arithmetic on --vg-radius and Shio's console measured ten distinct radii.
     --vg-radius stays as the panel value for stylesheets that still read it. */
  --vg-radius-control: 0.375rem;
  --vg-radius-panel: 0.625rem;
  --vg-radius-full: 9999px;
  --vg-radius: var(--vg-radius-panel);
  --vg-background: oklch(1 0 0);
  --vg-foreground: oklch(0.145 0 0);
  --vg-card: oklch(1 0 0);
  --vg-card-foreground: oklch(0.145 0 0);
  --vg-popover: oklch(1 0 0);
  --vg-popover-foreground: oklch(0.145 0 0);
  /* The mark for where a product is. The bento layer reads this for the rail's
     active item, the tile's hover glow and an inline edit's border, and the
     default Button variant is `bg-primary text-primary-foreground` -- so a
     product that keys only the accent has all four in a neutral.

     Claimed through the four inputs below rather than by setting --vg-primary
     directly, for the reason the accent has -text-dark: a consumer stylesheet
     imports this file and then declares its own :root, which lands after the
     dark block at the same specificity and in no layer. A bare --vg-primary set
     there wins on BOTH grounds and keys the dark one to the light value. The
     inputs are read per ground, so a product never writes a dark block. */
  --vg-primary-base: oklch(0.205 0 0);
  --vg-primary-base-dark: oklch(0.922 0 0);
  --vg-primary-foreground-base: oklch(0.985 0 0);
  --vg-primary-foreground-base-dark: oklch(0.205 0 0);

  --vg-primary: var(--vg-primary-base);
  --vg-primary-foreground: var(--vg-primary-foreground-base);
  --vg-secondary: oklch(0.97 0 0);
  --vg-secondary-foreground: oklch(0.205 0 0);
  --vg-muted: oklch(0.97 0 0);
  /* 0.52 and not 0.556 (VDS92): the old value was 4.34:1 on --vg-muted, under AA, and
     break-even is 0.547. contrast.test.ts holds every named pair to 4.5:1. */
  --vg-muted-foreground: oklch(0.52 0 0);
  --vg-accent: oklch(0.97 0 0);
  --vg-accent-foreground: oklch(0.205 0 0);
  --vg-destructive: oklch(0.577 0.245 27.325);
  --vg-border: oklch(0.922 0 0);
  --vg-input: oklch(0.922 0 0);
  --vg-ring: oklch(0.708 0 0);
  --vg-chart-1: oklch(0.646 0.222 41.116);
  --vg-chart-2: oklch(0.6 0.118 184.704);
  --vg-chart-3: oklch(0.398 0.07 227.392);
  --vg-chart-4: oklch(0.828 0.189 84.429);
  --vg-chart-5: oklch(0.769 0.188 70.08);
  --vg-sidebar: oklch(0.985 0 0);
  --vg-sidebar-foreground: oklch(0.145 0 0);
  --vg-sidebar-primary: oklch(0.205 0 0);
  --vg-sidebar-primary-foreground: oklch(0.985 0 0);
  --vg-sidebar-accent: oklch(0.97 0 0);
  --vg-sidebar-accent-foreground: oklch(0.205 0 0);
  --vg-sidebar-border: oklch(0.922 0 0);
  --vg-sidebar-ring: oklch(0.708 0 0);

  /* Bento tones — the two gradient stops of the tonal icon chip, which is the
     most repeated visual in the bento layer: every hero, every form section,
     every tile. A product re-keys a tone by redefining these two properties,
     not by forking the component that renders it.

     The values are the OKLCH the layer shipped with, so re-keying is a choice
     rather than something that happened on the way here. Fixed across light and
     dark on purpose: the chip carries the colour and the surface stays a neutral
     card, so the two never compete. */
  --vg-bento-tone-blue-from: oklch(54.6% 0.245 262.881);
  --vg-bento-tone-blue-to: oklch(51.1% 0.262 276.966);
  --vg-bento-tone-indigo-from: oklch(51.1% 0.262 276.966);
  --vg-bento-tone-indigo-to: oklch(59.1% 0.293 322.896);
  --vg-bento-tone-violet-from: oklch(54.1% 0.281 293.009);
  --vg-bento-tone-violet-to: oklch(55.8% 0.288 302.321);
  --vg-bento-tone-emerald-from: oklch(59.6% 0.145 163.225);
  --vg-bento-tone-emerald-to: oklch(60% 0.118 184.704);
  --vg-bento-tone-amber-from: oklch(76.9% 0.188 70.08);
  --vg-bento-tone-amber-to: oklch(70.5% 0.213 47.604);
  --vg-bento-tone-rose-from: oklch(58.6% 0.253 17.585);
  --vg-bento-tone-rose-to: oklch(59.2% 0.249 0.584);
  --vg-bento-tone-slate-from: oklch(44.6% 0.043 257.281);
  --vg-bento-tone-slate-to: oklch(37.2% 0.044 257.287);

  /* Bento status intents — the pills and the destructive menu item. Same reason
     the tones are tokens: a shared component that names its own colours makes
     one product look wrong. `-mark` is the dot and the border/background tint;
     `-text` is the label, with a lighter value on dark where the tinted surface
     is darker. Values are the OKLCH the layer shipped with. */
  --vg-bento-on-mark: oklch(69.6% 0.17 162.48);
  --vg-bento-on-text: oklch(50.8% 0.118 165.612);
  --vg-bento-on-text-dark: oklch(76.5% 0.177 163.223);
  --vg-bento-warn-mark: oklch(76.9% 0.188 70.08);
  --vg-bento-warn-text: oklch(47.3% 0.137 46.201);
  --vg-bento-warn-text-dark: oklch(82.8% 0.189 84.429);
  --vg-bento-error-mark: oklch(63.7% 0.237 25.331);
  --vg-bento-error-text: oklch(50.5% 0.213 27.518);
  --vg-bento-error-text-dark: oklch(70.4% 0.191 22.216);
  --vg-bento-danger-mark: oklch(64.5% 0.246 16.439);
  --vg-bento-danger-text: oklch(51.4% 0.222 16.935);
  --vg-bento-danger-text-dark: oklch(71.2% 0.194 13.428);
  --vg-bento-danger-text-dark-hover: oklch(81% 0.117 11.638);
  /* Bento record states (VDS182) — the dot beside the word `BentoStatusMarker`
     draws. Colour marks state here and nowhere per area. Published and changed
     are the `on` and `warn` marks, so a live record and a pending edit read the
     same in a pill and in a row; the other three are slate, violet and a
     neutral that says the record is out of play. */
  --vg-bento-state-published: var(--vg-bento-on-mark);
  --vg-bento-state-draft: oklch(55.4% 0.046 257.417);
  --vg-bento-state-scheduled: oklch(60.6% 0.25 292.717);
  --vg-bento-state-changed: var(--vg-bento-warn-mark);
  --vg-bento-state-archived: oklch(87% 0 0);
  /* The pulse glow behind a live indicator. It shipped as a raw indigo inside a
     keyframe, where the check that reads Tailwind class names could not see it. */
  --vg-bento-pulse: oklch(58.5% 0.233 277.117);

  /* The brand accent — the tinted icon chip, the ring around it, the accented
     label, the solid primary fill. It shipped as a literal blue/indigo pair
     spelled out in every page header, sidebar and empty state, which is why the
     two products could not differ where they should and had to fork a header to
     differ at all.

     A product sets --vg-accent-from / -to / -text / -text-dark once, at the
     root, and every shared component follows. The values here are the blue the
     console shipped with, so re-keying is a choice rather than something that
     happened on the way here. */
  --vg-accent-from: oklch(62.3% 0.214 259.815);
  --vg-accent-to: oklch(58.5% 0.233 277.117);
  --vg-accent-text: oklch(48.8% 0.243 264.376);
  --vg-accent-text-dark: oklch(70.7% 0.165 254.624);

  /* Derived, and already resolved for the current theme — the .dark block below
     re-points -fg, so a component writes text-[var(--vg-accent-fg)] once and
     needs no dark: twin. The three surfaces are the tint, the strong tint and
     the line, in the proportions the chip already uses.

     Set the four source tokens on :root, not on a wrapper. A custom property
     substitutes its var() references where it is *declared*, so everything
     below is mixed against the --vg-accent-from declared here. Re-keying a
     subtree changes what a utility class mixes inline — the chip, the solid
     fill — and leaves these at the root's value, which looks like a partial
     re-key and reads as a bug in the component. */
  --vg-accent-fg: var(--vg-accent-text);
  --vg-accent-surface: color-mix(in oklab, var(--vg-accent-from) 10%, transparent);
  --vg-accent-surface-strong: color-mix(in oklab, var(--vg-accent-from) 20%, transparent);
  --vg-accent-line: color-mix(in oklab, var(--vg-accent-from) 35%, transparent);

  /* The accent as an interactive surface — the primary button, the checked
     switch. The fill sits a step darker than the stops so its white label clears
     contrast, on both grounds: the dark ground once used the stops themselves,
     which put that label at 3.76:1. */
  --vg-accent-fill-from: color-mix(in oklab, var(--vg-accent-from) 88%, black);
  --vg-accent-fill-to: color-mix(in oklab, var(--vg-accent-to) 88%, black);
  --vg-accent-fill-from-hover: color-mix(in oklab, var(--vg-accent-from) 76%, black);
  --vg-accent-fill-to-hover: color-mix(in oklab, var(--vg-accent-to) 76%, black);
  --vg-accent-ring: color-mix(in oklab, var(--vg-accent-from) 50%, transparent);
  --vg-accent-shadow: color-mix(in oklab, var(--vg-accent-from) 25%, transparent);
  --vg-accent-shadow-hover: color-mix(in oklab, var(--vg-accent-from) 30%, transparent);

  /* Control heights (VDS197) — a closed scale of two heights and a touch step.
     Dense is a table row's, a filter bar's and a toolbar's control; form is a
     field's and its actions'. Button, Input, Select, Toggle and GradientButton
     read these and nothing else, so `lg` is form and not a third height. A
     coarse pointer raises both to the touch step, in the block below. Shio's
     console measured fifteen control heights before this scale existed. */
  --vg-control-dense: 2rem;
  --vg-control-form: 2.25rem;
  --vg-control-touch: 2.75rem;

  /* The one monospace stack (VDS199). The face is named and not bundled: a
     product that loads JetBrains Mono gets it, and one that does not falls to
     the platform's ui-monospace, which is still one mono and not three. */
  --vg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --vg-text-mono: 0.75rem;

  /* Brand palette */
  --vg-brand: #c2410c;
  --vg-brand-dark: #9a3412;
  --vg-brand-light: #ea580c;
  --vg-brand-lighter: #f97316;
  --vg-brand-bg: #fff7ed;
  --vg-brand-mid: #ffedd5;
  --vg-brand-border: #fed7aa;
  --vg-brand-on: #ffdead;
  --vg-gradient: linear-gradient(135deg, #c2410c 0%, #f97316 100%);

  /* Dark institutional footer */
  --vg-footer-bg: #1a202c;
  --vg-footer-fg: #ffffff;
  --vg-footer-muted: #94a3b8;
  --vg-footer-dim: #64748b;
  --vg-footer-border: rgba(255, 255, 255, 0.08);

  /* Product accent colors (match viglet.org) */
  --vg-product-turing: #4169e1;
  --vg-product-shio: #7c3aed;
  --vg-product-dumont: #0f766e;

  /* ── Back-compat aliases ──────────────────────────────────────────────
     Older consumers (and pre-2026.2.42 DS versions) defined these names
     directly. Aliasing keeps `var(--background)`, `var(--border)`, etc.
     resolving correctly. New code should prefer `--vg-*` to avoid
     collisions with consumer-defined tokens. */
  --background: var(--vg-background);
  --foreground: var(--vg-foreground);
  --card: var(--vg-card);
  --card-foreground: var(--vg-card-foreground);
  --popover: var(--vg-popover);
  --popover-foreground: var(--vg-popover-foreground);
  --primary: var(--vg-primary);
  --primary-foreground: var(--vg-primary-foreground);
  --secondary: var(--vg-secondary);
  --secondary-foreground: var(--vg-secondary-foreground);
  --muted: var(--vg-muted);
  --muted-foreground: var(--vg-muted-foreground);
  --accent: var(--vg-accent);
  --accent-foreground: var(--vg-accent-foreground);
  --destructive: var(--vg-destructive);
  --border: var(--vg-border);
  --input: var(--vg-input);
  --ring: var(--vg-ring);
  --radius: var(--vg-radius);
  --chart-1: var(--vg-chart-1);
  --chart-2: var(--vg-chart-2);
  --chart-3: var(--vg-chart-3);
  --chart-4: var(--vg-chart-4);
  --chart-5: var(--vg-chart-5);
  --sidebar: var(--vg-sidebar);
  --sidebar-foreground: var(--vg-sidebar-foreground);
  --sidebar-primary: var(--vg-sidebar-primary);
  --sidebar-primary-foreground: var(--vg-sidebar-primary-foreground);
  --sidebar-accent: var(--vg-sidebar-accent);
  --sidebar-accent-foreground: var(--vg-sidebar-accent-foreground);
  --sidebar-border: var(--vg-sidebar-border);
  --sidebar-ring: var(--vg-sidebar-ring);
}

/* A finger needs a larger target than a cursor, so both control heights meet
   at the touch step there. A product that redeclares the two heights on its own
   :root overrides this as well, which is why the scale is not for re-keying. */
@media (pointer: coarse) {
  :root {
    --vg-control-dense: var(--vg-control-touch);
    --vg-control-form: var(--vg-control-touch);
  }
}

/* Dark surfaces sit one step above pure black on purpose. Near-black (0.145)
   under near-white text runs ~17:1 — far past AAA, and that overshoot is what
   produces halation: the glyphs bloom at the edges, worst for astigmatic eyes.
   The ramp below lands text at ~11.2:1 — still well past AAA (7:1), and inside
   the band Material recommends for high-emphasis dark-theme text (white at
   ~87%). Going further starts closing on --vg-muted-foreground (6.7:1) and
   flattens the title/supporting-text hierarchy, which is the same problem from
   the other side. It also follows the dark-theme elevation rule that higher
   surfaces are LIGHTER, not shadowed:

     background 0.205  <  card/sidebar 0.269  <  muted/accent/popover 0.320

   Each step must stay distinct — accent and card sharing a value is what makes
   hovers and the selected sidebar item vanish. */
.dark,
[data-theme="dark"] {
  --vg-background: oklch(0.205 0 0);
  --vg-foreground: oklch(0.90 0 0);
  --vg-card: oklch(0.269 0 0);
  --vg-card-foreground: oklch(0.90 0 0);
  /* Elevated above card, so a dropdown over a card reads as lifted. */
  --vg-popover: oklch(0.32 0 0);
  --vg-popover-foreground: oklch(0.90 0 0);
  /* The other half of the pair above: this block re-points the output, and the
     value it points at is the product's, so re-keying stays a :root edit. */
  --vg-primary: var(--vg-primary-base-dark);
  --vg-primary-foreground: var(--vg-primary-foreground-base-dark);
  --vg-secondary: oklch(0.32 0 0);
  --vg-secondary-foreground: oklch(0.90 0 0);
  --vg-muted: oklch(0.32 0 0);
  /* 0.708 -> 0.75 recovers the ~6.9:1 that the lighter card would have cost. */
  --vg-muted-foreground: oklch(0.75 0 0);
  --vg-accent: oklch(0.32 0 0);
  --vg-accent-foreground: oklch(0.90 0 0);
  /* The brand accent's dark twin. The tint surfaces are color-mix over the same
     stop and read correctly on either ground, so only the foreground re-points
     here. The interactive fill does not: it carries a white label, and the stop
     itself left that label at 3.76:1 on this ground (VDS151), so the dark ground
     keeps the light ground's darker step and its hover. */
  --vg-accent-fg: var(--vg-accent-text-dark);
  --vg-accent-ring: color-mix(in oklab, var(--vg-accent-text-dark) 50%, transparent);
  --vg-accent-shadow: color-mix(in oklab, var(--vg-accent-from) 20%, transparent);
  --vg-accent-shadow-hover: color-mix(in oklab, var(--vg-accent-from) 25%, transparent);
  --vg-destructive: oklch(0.704 0.191 22.216);
  /* A white-alpha line composites over its own surface, so its ratio barely
     moves when the surface lightens — 15% was 1.67:1 on the old card and would
     have been 1.73:1 on the new one. Interactive control outlines need 3:1
     (WCAG 1.4.11), which lands at 34% regardless of which dark you pick.
     --vg-border stays decorative (card/divider), so it only gets a nudge. */
  --vg-border: oklch(1 0 0 / 14%);
  --vg-input: oklch(1 0 0 / 34%);
  /* Was a neutral gray that read as "slightly lighter border" rather than as
     focus. The brand's dark-mode blue hits 5.9:1 on the card. */
  --vg-ring: var(--vg-accent-text-dark);
  --vg-chart-1: oklch(0.488 0.243 264.376);
  --vg-chart-2: oklch(0.696 0.17 162.48);
  --vg-chart-3: oklch(0.769 0.188 70.08);
  --vg-chart-4: oklch(0.627 0.265 303.9);
  --vg-chart-5: oklch(0.645 0.246 16.439);
  --vg-sidebar: oklch(0.269 0 0);
  --vg-sidebar-foreground: oklch(0.90 0 0);
  --vg-sidebar-primary: oklch(0.488 0.243 264.376);
  /* Stays brighter than the other foregrounds: this one sits on a saturated
     blue fill, not on a dark neutral, so the halation argument does not apply
     and contrast is the only thing to optimise. */
  --vg-sidebar-primary-foreground: oklch(0.96 0 0);
  /* Must stay one step above --vg-sidebar or the selected item disappears. */
  --vg-sidebar-accent: oklch(0.32 0 0);
  --vg-sidebar-accent-foreground: oklch(0.90 0 0);
  --vg-sidebar-border: oklch(1 0 0 / 14%);
  --vg-sidebar-ring: var(--vg-accent-text-dark);

  /* Brand (dark) */
  --vg-brand: #f97316;
  --vg-brand-dark: #c2410c;
  --vg-brand-light: #fb923c;
  --vg-brand-lighter: #fdba74;
  --vg-brand-bg: rgba(249, 115, 22, 0.1);
  --vg-brand-mid: rgba(249, 115, 22, 0.15);
  --vg-brand-border: rgba(249, 115, 22, 0.3);
  --vg-gradient: linear-gradient(135deg, #f97316 0%, #fdba74 100%);
}

/* ── Tone (VDS213) ─────────────────────────────────────────────────────
   The accent re-keys the highlight; a tone re-keys the ground under it: the
   neutrals, the brand palette, the gradient, the footer and the display face.
   Selected by `data-tone` on any ancestor, and it composes with the mode, so
   each tone has a light and a dark set and the accent still re-keys on top.

   `cool` is the default and declares nothing: everything above is cool, so a
   page with no tone, or with `data-tone="cool"`, renders exactly as before.
   `warm` is clay on a dark-brown ground, for a product family whose ground is
   warm. `navy` (VDS221) is a clear blue on a navy ground, for a family whose
   mark is blue. A name describes the ground, never a product.

   A product's own :root still wins over a tone set on the root element: the two
   have the same specificity and the product's stylesheet comes later, so the
   primary inputs and the accent re-key on top of either tone.

   The back-compat aliases and --vg-primary are restated here because a custom
   property substitutes its var() where it is declared. Declared only on :root,
   they would keep the cool values inside a warm subtree. */
[data-tone="warm"] {
  --font-brand: var(--font-sans);

  --vg-background: #fbf7f4;
  --vg-foreground: #1d1408;
  --vg-card: #ffffff;
  --vg-card-foreground: #1d1408;
  --vg-popover: #ffffff;
  --vg-popover-foreground: #1d1408;
  --vg-primary-base: #1d1408;
  --vg-primary-base-dark: #f4ece4;
  --vg-primary-foreground-base: #fbf7f4;
  --vg-primary-foreground-base-dark: #1d1408;
  --vg-primary: var(--vg-primary-base);
  --vg-primary-foreground: var(--vg-primary-foreground-base);
  --vg-secondary: #f4ece6;
  --vg-secondary-foreground: #1d1408;
  --vg-muted: #f4ece6;
  --vg-muted-foreground: #5c4a3d;
  --vg-accent: #f4ece6;
  --vg-accent-foreground: #1d1408;
  --vg-border: #e6d8cf;
  --vg-input: #e6d8cf;
  --vg-ring: #b6a596;
  --vg-sidebar: #f8f1ec;
  --vg-sidebar-foreground: #1d1408;
  --vg-sidebar-primary: #1d1408;
  --vg-sidebar-primary-foreground: #fbf7f4;
  --vg-sidebar-accent: #efe4dc;
  --vg-sidebar-accent-foreground: #1d1408;
  --vg-sidebar-border: #e6d8cf;
  --vg-sidebar-ring: #b6a596;

  --vg-brand: #a64b2e;
  --vg-brand-dark: #98452a;
  --vg-brand-light: #d97757;
  --vg-brand-lighter: #e89070;
  --vg-brand-bg: #fbefe9;
  --vg-brand-mid: #f6dfd4;
  --vg-brand-border: #edc3b1;
  --vg-brand-on: #ffe2d4;
  --vg-gradient: linear-gradient(135deg, #b85c3c 0%, #e9a33a 100%);

  --vg-footer-bg: #15100c;
  --vg-footer-fg: #f4ece4;
  --vg-footer-muted: #b6a596;
  --vg-footer-dim: #8a7868;
  --vg-footer-border: rgba(244, 236, 228, 0.08);

  --background: var(--vg-background);
  --foreground: var(--vg-foreground);
  --card: var(--vg-card);
  --card-foreground: var(--vg-card-foreground);
  --popover: var(--vg-popover);
  --popover-foreground: var(--vg-popover-foreground);
  --primary: var(--vg-primary);
  --primary-foreground: var(--vg-primary-foreground);
  --secondary: var(--vg-secondary);
  --secondary-foreground: var(--vg-secondary-foreground);
  --muted: var(--vg-muted);
  --muted-foreground: var(--vg-muted-foreground);
  --accent: var(--vg-accent);
  --accent-foreground: var(--vg-accent-foreground);
  --border: var(--vg-border);
  --input: var(--vg-input);
  --ring: var(--vg-ring);
  --sidebar: var(--vg-sidebar);
  --sidebar-foreground: var(--vg-sidebar-foreground);
  --sidebar-primary: var(--vg-sidebar-primary);
  --sidebar-primary-foreground: var(--vg-sidebar-primary-foreground);
  --sidebar-accent: var(--vg-sidebar-accent);
  --sidebar-accent-foreground: var(--vg-sidebar-accent-foreground);
  --sidebar-border: var(--vg-sidebar-border);
  --sidebar-ring: var(--vg-sidebar-ring);
}

/* Warm on the dark ground. Spelled out rather than through :is(), so the mode
   and the tone can sit on the same element or either above the other, and so
   every selector carries two classes or attributes: (0,2,0) beats both the cool
   dark block and the warm block above, whatever their order. The surfaces keep
   the cool ramp's rule that a higher surface is lighter. */
.dark[data-tone="warm"],
.dark [data-tone="warm"],
[data-theme="dark"][data-tone="warm"],
[data-theme="dark"] [data-tone="warm"],
[data-tone="warm"] .dark,
[data-tone="warm"] [data-theme="dark"] {
  --vg-background: #15100c;
  --vg-foreground: #f4ece4;
  --vg-card: #221a14;
  --vg-card-foreground: #f4ece4;
  --vg-popover: #2c2118;
  --vg-popover-foreground: #f4ece4;
  --vg-primary: var(--vg-primary-base-dark);
  --vg-primary-foreground: var(--vg-primary-foreground-base-dark);
  --vg-secondary: #2c2118;
  --vg-secondary-foreground: #f4ece4;
  --vg-muted: #2c2118;
  --vg-muted-foreground: #b6a596;
  --vg-accent: #2c2118;
  --vg-accent-foreground: #f4ece4;
  --vg-border: rgba(244, 236, 228, 0.14);
  --vg-input: rgba(244, 236, 228, 0.34);
  --vg-ring: var(--vg-accent-text-dark);
  --vg-sidebar: #221a14;
  --vg-sidebar-foreground: #f4ece4;
  --vg-sidebar-primary: #d97757;
  --vg-sidebar-primary-foreground: #15100c;
  --vg-sidebar-accent: #2c2118;
  --vg-sidebar-accent-foreground: #f4ece4;
  --vg-sidebar-border: rgba(244, 236, 228, 0.14);
  --vg-sidebar-ring: var(--vg-accent-text-dark);

  --vg-brand: #d97757;
  --vg-brand-dark: #b85c3c;
  --vg-brand-light: #e89070;
  --vg-brand-lighter: #f0b49a;
  --vg-brand-bg: rgba(217, 119, 87, 0.1);
  --vg-brand-mid: rgba(217, 119, 87, 0.15);
  --vg-brand-border: rgba(217, 119, 87, 0.3);
  --vg-gradient: linear-gradient(135deg, #d97757 0%, #e9a33a 100%);
}

/* Navy (VDS221): the warm tone's token set, block for block, on a navy ground
   with a clear blue as the brand. */
[data-tone="navy"] {
  --font-brand: var(--font-sans);

  --vg-background: #f6f8fc;
  --vg-foreground: #0b1220;
  --vg-card: #ffffff;
  --vg-card-foreground: #0b1220;
  --vg-popover: #ffffff;
  --vg-popover-foreground: #0b1220;
  --vg-primary-base: #0b1220;
  --vg-primary-base-dark: #e6edf7;
  --vg-primary-foreground-base: #f6f8fc;
  --vg-primary-foreground-base-dark: #0b1220;
  --vg-primary: var(--vg-primary-base);
  --vg-primary-foreground: var(--vg-primary-foreground-base);
  --vg-secondary: #ebf0f8;
  --vg-secondary-foreground: #0b1220;
  --vg-muted: #ebf0f8;
  --vg-muted-foreground: #46546b;
  --vg-accent: #ebf0f8;
  --vg-accent-foreground: #0b1220;
  --vg-border: #d6deea;
  --vg-input: #d6deea;
  --vg-ring: #93a4bc;
  --vg-sidebar: #f1f4fa;
  --vg-sidebar-foreground: #0b1220;
  --vg-sidebar-primary: #0b1220;
  --vg-sidebar-primary-foreground: #f6f8fc;
  --vg-sidebar-accent: #e3e9f3;
  --vg-sidebar-accent-foreground: #0b1220;
  --vg-sidebar-border: #d6deea;
  --vg-sidebar-ring: #93a4bc;

  --vg-brand: #1a56c9;
  --vg-brand-dark: #164aad;
  --vg-brand-light: #2f8bff;
  --vg-brand-lighter: #5aa3ff;
  --vg-brand-bg: #eef4ff;
  --vg-brand-mid: #dce8ff;
  --vg-brand-border: #b9d2ff;
  --vg-brand-on: #dcebff;
  --vg-gradient: linear-gradient(135deg, #1a4fd6 0%, #0ea5e9 100%);

  --vg-footer-bg: #0b1220;
  --vg-footer-fg: #e6edf7;
  --vg-footer-muted: #93a4bc;
  --vg-footer-dim: #6b7c95;
  --vg-footer-border: rgba(230, 237, 247, 0.08);

  --background: var(--vg-background);
  --foreground: var(--vg-foreground);
  --card: var(--vg-card);
  --card-foreground: var(--vg-card-foreground);
  --popover: var(--vg-popover);
  --popover-foreground: var(--vg-popover-foreground);
  --primary: var(--vg-primary);
  --primary-foreground: var(--vg-primary-foreground);
  --secondary: var(--vg-secondary);
  --secondary-foreground: var(--vg-secondary-foreground);
  --muted: var(--vg-muted);
  --muted-foreground: var(--vg-muted-foreground);
  --accent: var(--vg-accent);
  --accent-foreground: var(--vg-accent-foreground);
  --border: var(--vg-border);
  --input: var(--vg-input);
  --ring: var(--vg-ring);
  --sidebar: var(--vg-sidebar);
  --sidebar-foreground: var(--vg-sidebar-foreground);
  --sidebar-primary: var(--vg-sidebar-primary);
  --sidebar-primary-foreground: var(--vg-sidebar-primary-foreground);
  --sidebar-accent: var(--vg-sidebar-accent);
  --sidebar-accent-foreground: var(--vg-sidebar-accent-foreground);
  --sidebar-border: var(--vg-sidebar-border);
  --sidebar-ring: var(--vg-sidebar-ring);
}

/* Navy on the dark ground, with the selector set the warm dark block uses. */
.dark[data-tone="navy"],
.dark [data-tone="navy"],
[data-theme="dark"][data-tone="navy"],
[data-theme="dark"] [data-tone="navy"],
[data-tone="navy"] .dark,
[data-tone="navy"] [data-theme="dark"] {
  --vg-background: #0b1220;
  --vg-foreground: #e6edf7;
  --vg-card: #121b2e;
  --vg-card-foreground: #e6edf7;
  --vg-popover: #18233a;
  --vg-popover-foreground: #e6edf7;
  --vg-primary: var(--vg-primary-base-dark);
  --vg-primary-foreground: var(--vg-primary-foreground-base-dark);
  --vg-secondary: #18233a;
  --vg-secondary-foreground: #e6edf7;
  --vg-muted: #18233a;
  --vg-muted-foreground: #93a4bc;
  --vg-accent: #18233a;
  --vg-accent-foreground: #e6edf7;
  --vg-border: rgba(230, 237, 247, 0.14);
  --vg-input: rgba(230, 237, 247, 0.34);
  --vg-ring: var(--vg-accent-text-dark);
  --vg-sidebar: #121b2e;
  --vg-sidebar-foreground: #e6edf7;
  --vg-sidebar-primary: #2f8bff;
  --vg-sidebar-primary-foreground: #0b1220;
  --vg-sidebar-accent: #18233a;
  --vg-sidebar-accent-foreground: #e6edf7;
  --vg-sidebar-border: rgba(230, 237, 247, 0.14);
  --vg-sidebar-ring: var(--vg-accent-text-dark);

  --vg-brand: #4c9aff;
  --vg-brand-dark: #2f8bff;
  --vg-brand-light: #5aa3ff;
  --vg-brand-lighter: #8cc0ff;
  --vg-brand-bg: rgba(47, 139, 255, 0.1);
  --vg-brand-mid: rgba(47, 139, 255, 0.15);
  --vg-brand-border: rgba(47, 139, 255, 0.3);
  --vg-gradient: linear-gradient(135deg, #2f8bff 0%, #7dd3fc 100%);
}