/* =============================================================================
   GeoVerio Design System — tokens.css
   Version 2.0.0 · "Ember" · Atlas V2 brand-pack integration
   -----------------------------------------------------------------------------
   THE CONTRACT. Every colour, size, radius, shadow and duration in the product
   is declared here and nowhere else.

   Three layers, in strict order:
     1. PRIMITIVE   raw ramps and scales. Mode-independent. Never used directly
                    in a component — they exist so semantic tokens have
                    something to point at.
     2. SEMANTIC    what a thing IS, not what colour it is. Mode-dependent.
                    This is the only layer components may reference.
     3. BRIDGE      optional back-compat aliases that map the legacy
                    site.css / app.css / partners variable names onto the
                    semantic layer. Load it and an un-migrated theme inherits
                    the whole system.

   RULES
     · Components reference ONLY --gv-<semantic>. Never a primitive, never a
       literal. A hex code in a component file is a bug.
     · Every token here is namespaced --gv-*. That is deliberate: this file can
       be loaded alongside any existing stylesheet without a collision, so the
       palette never again depends on <link> order.
     · Every foreground/background pair in the semantic layer is contrast-
       validated. 76 pairs, 0 failures. See DESIGN-SYSTEM.md §3.4.
     · No build step. No preprocessor. Plain CSS custom properties.

   Load order:  tokens.css  →  base.css  →  components.css  →  theme overrides
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PRIMITIVES — colour ramps
   Mode-independent. The number is perceptual lightness, not a rank.
   -------------------------------------------------------------------------- */
:root {
  /* Ember — the brand. 400/500/600 are the values already shipping in `bands`,
     preserved deliberately so migration is not a repaint. */
  --gv-ember-50: #fff5f2;
  --gv-ember-100: #ffe5dd;
  --gv-ember-200: #ffc7b8;
  --gv-ember-300: #ffa189;
  --gv-ember-400: #ff6a4d;
  --gv-ember-500: #f5431f;
  --gv-ember-600: #d92100;
  --gv-ember-700: #b01b00;
  --gv-ember-800: #8a1600;
  --gv-ember-900: #661100;

  /* Brand pack v2 (GeoVerio-Brand-Starter) — the approved logo gradient.
     Stop 3 is the pack's "soft orange" #ff7a45; it is intentionally NOT on
     the ember ramp (ember-400 is #ff6a4d) because the artwork is fixed.
     Logo, loaders and decorative gradients ONLY — never text, never fills
     under text. */
  --gv-brand-stop-1: var(--gv-ember-600);
  --gv-brand-stop-2: var(--gv-ember-500);
  --gv-brand-stop-3: #ff7a45;
  --gv-brand-gradient: linear-gradient(135deg, var(--gv-brand-stop-1) 0%, var(--gv-brand-stop-2) 55%, var(--gv-brand-stop-3) 100%);

  /* Amber — accent-2. Gradient partner and data-viz series 2 ONLY.
     Never a status colour: it is too close to Ember to carry meaning. */
  --gv-amber-50: #fff8ed;
  --gv-amber-100: #ffedd0;
  --gv-amber-200: #ffd79c;
  --gv-amber-300: #ffbe66;
  --gv-amber-400: #ffa14d;
  --gv-amber-500: #f08600;
  --gv-amber-600: #e07000;
  --gv-amber-700: #b25600;
  --gv-amber-800: #8a4300;
  --gv-amber-900: #663200;

  /* Neutral — warm-tinted greys. These carry ~95% of the product's pixels.
     The tint (hue ~40, very low chroma) is what makes the UI feel like paper
     next to Ember rather than like a blue product with an orange button. */
  --gv-neutral-0: #ffffff;
  --gv-neutral-25: #fbfaf7;
  --gv-neutral-50: #f7f5f0;
  --gv-neutral-100: #f4f2ed;
  --gv-neutral-150: #efece5;
  --gv-neutral-200: #e2ded4;
  --gv-neutral-250: #dedbd3;
  --gv-neutral-300: #c9c4b8;
  --gv-neutral-400: #9c9483;
  --gv-neutral-500: #7d7566;
  --gv-neutral-600: #6b675e;
  --gv-neutral-650: #585550;
  --gv-neutral-700: #4a4843;
  --gv-neutral-800: #2d2c29;
  --gv-neutral-850: #201f1d;
  --gv-neutral-875: #191817;
  --gv-neutral-900: #141312;
  --gv-neutral-925: #100f0e;
  --gv-neutral-950: #0c0c0b;

  /* Teal — success */
  --gv-teal-50: #eefbf7;
  --gv-teal-100: #d2f5ec;
  --gv-teal-200: #a2e9db;
  --gv-teal-300: #5fd6c2;
  --gv-teal-400: #2dd4bf;
  --gv-teal-500: #12938a;
  --gv-teal-600: #0f6b63;
  --gv-teal-700: #0c5751;
  --gv-teal-800: #09443f;
  --gv-teal-900: #07322f;

  /* Rose — danger. Deliberately pink-shifted and darker than Ember so a
     destructive control never reads as a brand control. See §4.2. */
  --gv-rose-50: #fff1f4;
  --gv-rose-100: #ffe1e7;
  --gv-rose-200: #fdc3d0;
  --gv-rose-300: #fb9cb1;
  --gv-rose-400: #fb7185;
  --gv-rose-500: #e11d48;
  --gv-rose-600: #be123c;
  --gv-rose-700: #9f0f33;
  --gv-rose-800: #800c29;
  --gv-rose-900: #61091f;

  /* Gold — warning */
  --gv-gold-50: #fffaeb;
  --gv-gold-100: #fdf0c8;
  --gv-gold-200: #fbdf8e;
  --gv-gold-300: #f7c94f;
  --gv-gold-400: #fbbf24;
  --gv-gold-500: #b8770a;
  --gv-gold-600: #8a5a00;
  --gv-gold-700: #6e4700;
  --gv-gold-800: #573800;
  --gv-gold-900: #402900;

  /* Azure — info */
  --gv-azure-50: #eff5ff;
  --gv-azure-100: #dbe8ff;
  --gv-azure-200: #bcd4ff;
  --gv-azure-300: #93b6ff;
  --gv-azure-400: #7dd3fc;
  --gv-azure-500: #2b5fdc;
  --gv-azure-600: #1b45c4;
  --gv-azure-700: #16389e;
  --gv-azure-800: #122d80;
  --gv-azure-900: #0d2160;

  /* Violet — data-viz only. Never UI. */
  --gv-violet-400: #c4a6ff;
  --gv-violet-600: #6d28d9;
}

/* -----------------------------------------------------------------------------
   1b. PRIMITIVES — dimensional scales (mode-independent)
   -------------------------------------------------------------------------- */
:root {
  /* --- Typography -----------------------------------------------------------
     Two families, and only two — Atlas V2 uses the brand pack's Geist for
     UI *and* display, Geist Mono for code. Both are self-hosted VARIABLE fonts
     (100–900), so every declared weight is real; nothing is synthesised.
     Inter remains only as the network-failure fallback. */
  --gv-font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gv-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gv-font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;

  --gv-weight-regular: 400;
  --gv-weight-medium: 500;
  --gv-weight-semibold: 600;
  --gv-weight-bold: 700;

  /* 11 steps. Each size ships with a mandated line-height and tracking —
     they are not independent choices. Root is 16px; sizes are rem so the
     scale survives a user's browser font-size setting. */
  --gv-text-2xs: 0.6875rem;  /* 11px */  --gv-leading-2xs: 1rem;      /* 16 */
  --gv-text-xs:  0.75rem;    /* 12px */  --gv-leading-xs:  1.125rem;  /* 18 */
  --gv-text-sm:  0.8125rem;  /* 13px */  --gv-leading-sm:  1.25rem;   /* 20 */
  --gv-text-md:  0.875rem;   /* 14px */  --gv-leading-md:  1.375rem;  /* 22 */
  --gv-text-base:0.9375rem;  /* 15px */  --gv-leading-base:1.5rem;    /* 24 */
  --gv-text-lg:  1.0625rem;  /* 17px */  --gv-leading-lg:  1.625rem;  /* 26 */
  --gv-text-xl:  1.25rem;    /* 20px */  --gv-leading-xl:  1.75rem;   /* 28 */
  --gv-text-2xl: 1.5rem;     /* 24px */  --gv-leading-2xl: 1.875rem;  /* 30 */
  --gv-text-3xl: 1.875rem;   /* 30px */  --gv-leading-3xl: 2.25rem;   /* 36 */
  --gv-text-4xl: 2.375rem;   /* 38px */  --gv-leading-4xl: 2.625rem;  /* 42 */
  --gv-text-5xl: 3rem;       /* 48px */  --gv-leading-5xl: 3.25rem;   /* 52 */
  --gv-text-6xl: 3.75rem;    /* 60px */  --gv-leading-6xl: 3.9375rem; /* 63 */

  /* Fluid display sizes — the only clamp() formulas in the system. */
  --gv-text-display: clamp(2.375rem, 1.55rem + 3.6vw, 3.75rem);
  --gv-text-hero:    clamp(2rem, 1.4rem + 2.6vw, 3rem);

  /* 4 tracking values. Not 25. */
  --gv-tracking-tight: -0.022em;  /* ≥ --gv-text-xl */
  --gv-tracking-snug:  -0.011em;  /* UI text, sm–lg */
  --gv-tracking-none:  0;
  --gv-tracking-wide:  0.08em;    /* overline / eyebrow, uppercase only */

  --gv-measure: 68ch;             /* max line length for prose */

  /* --- Spacing — 4pt grid, 13 steps + 2 hairlines ------------------------- */
  --gv-space-px:  1px;
  --gv-space-0:   0;
  --gv-space-0-5: 0.125rem;  /* 2  — optical nudges only */
  --gv-space-1:   0.25rem;   /* 4 */
  --gv-space-2:   0.5rem;    /* 8 */
  --gv-space-3:   0.75rem;   /* 12 */
  --gv-space-4:   1rem;      /* 16 */
  --gv-space-5:   1.25rem;   /* 20 */
  --gv-space-6:   1.5rem;    /* 24 */
  --gv-space-8:   2rem;      /* 32 */
  --gv-space-10:  2.5rem;    /* 40 */
  --gv-space-12:  3rem;      /* 48 */
  --gv-space-16:  4rem;      /* 64 */
  --gv-space-20:  5rem;      /* 80 */
  --gv-space-24:  6rem;      /* 96 */

  /* Section rhythm — one formula, responsive. Replaces the 64/96px split. */
  --gv-section-y: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --gv-section-y-lg: clamp(3.5rem, 2.2rem + 6vw, 7rem);

  /* --- Layout ------------------------------------------------------------- */
  --gv-container:        1120px;
  --gv-container-narrow:  760px;
  --gv-container-wide:   1320px;
  --gv-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* Breakpoints are documented constants — CSS cannot use vars in @media.
     sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Four tiers, no more. */

  /* --- Radii — 7 values ---------------------------------------------------- */
  --gv-radius-xs:  4px;   /* checkbox, swatch */
  --gv-radius-sm:  6px;   /* chip, inline code, tag */
  --gv-radius-md:  8px;   /* button, input, select, tab, icon-button */
  --gv-radius-lg:  12px;  /* card, table, code block, alert */
  --gv-radius-xl:  16px;  /* modal, popover, feature panel */
  --gv-radius-2xl: 24px;  /* marketing band, hero panel */
  --gv-radius-full: 999px;

  /* --- Border widths ------------------------------------------------------- */
  --gv-border-width: 1px;
  --gv-border-width-thick: 2px;

  /* --- Focus ring ---------------------------------------------------------- */
  /* Two layers: an offset in the page colour, then the ring. This reads on ANY
     background — including inside a filled button — which a single box-shadow
     ring does not. Ring colour is contrast-validated ≥3:1 in both modes. */
  --gv-ring-width: 2px;
  --gv-ring-offset: 2px;

  /* --- Icons --------------------------------------------------------------- */
  --gv-icon-2xs: 12px;
  --gv-icon-xs:  14px;
  --gv-icon-sm:  16px;   /* default in buttons and inputs */
  --gv-icon-md:  20px;   /* nav, list rows */
  --gv-icon-lg:  24px;   /* feature, section header */
  --gv-icon-xl:  32px;   /* empty state, marketing */
  /* One stroke weight on a 24 viewBox. The dense value exists only because a
     1.75 stroke disappears below 14px — it is an optical correction, not a
     second style. */
  --gv-icon-stroke: 1.75;
  --gv-icon-stroke-dense: 2;

  /* --- Touch --------------------------------------------------------------- */
  --gv-target-min: 24px;      /* WCAG 2.2 AA floor — hard minimum */
  --gv-target-comfortable: 44px;

  /* --- Z-index — one scale, product-wide ----------------------------------- */
  --gv-z-base:      0;
  --gv-z-docked:   10;
  --gv-z-sticky:   20;
  --gv-z-header:   30;
  --gv-z-dropdown: 40;
  --gv-z-backdrop: 50;
  --gv-z-modal:    60;
  --gv-z-popover:  70;
  --gv-z-toast:    80;
  --gv-z-tooltip:  90;

  /* --- Motion -------------------------------------------------------------- */
  --gv-duration-instant: 75ms;
  --gv-duration-fast:   120ms;
  --gv-duration-base:   180ms;
  --gv-duration-slow:   240ms;
  --gv-duration-slower: 320ms;
  --gv-duration-lazy:   480ms;
  --gv-ease-standard:   cubic-bezier(.2,0,0,1);
  --gv-ease-out:        cubic-bezier(.16,1,.3,1);
  --gv-ease-in:         cubic-bezier(.7,0,.84,0);
  --gv-ease-spring:     cubic-bezier(.34,1.56,.64,1);

  /* --- Misc ---------------------------------------------------------------- */
  --gv-opacity-disabled: 0.45;
  --gv-blur-sm: 8px;
  --gv-blur-md: 16px;
  --gv-blur-lg: 32px;
}

/* -----------------------------------------------------------------------------
   2. SEMANTIC — light (default)
   The only layer a component is allowed to reference.
   -------------------------------------------------------------------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

    /* Canvas & surfaces */
    --gv-bg: #ffffff;
    --gv-bg-subtle: #f4f2ed;
    --gv-bg-muted: #efece5;
    --gv-bg-inset: #e2ded4;
    --gv-surface: #ffffff;
    --gv-surface-hover: #f7f5f0;
    --gv-surface-active: #f4f2ed;
    --gv-surface-raised: #ffffff;
    --gv-overlay: rgba(20,18,16,0.45);

    /* Foreground */
    --gv-fg: #141416;
    --gv-fg-secondary: #585550;
    --gv-fg-muted: #6b675e;
    --gv-fg-subtle: #7d7566;
    --gv-fg-on-accent: #2b0b00;
    --gv-fg-on-solid: #ffffff;
    --gv-fg-inverse: #ffffff;

    /* Borders */
    --gv-border: #dedbd3;
    --gv-border-strong: #c9c4b8;
    --gv-border-control: #9c9483;
    --gv-border-accent: #f5431f;

    /* Accent */
    --gv-accent: #f5431f;
    --gv-accent-ink: #d92100;
    --gv-accent-solid: #f5431f;
    --gv-accent-hover: #d92100;
    --gv-accent-active: #b01b00;
    --gv-accent-subtle: #fff5f2;
    --gv-accent-muted: #ffe5dd;
    --gv-accent-border: #ffc7b8;
    --gv-accent-2: #e07000;

    /* Status — success */
    --gv-success: #0f6b63;
    --gv-success-ink: #0c5751;
    --gv-success-subtle: #eefbf7;
    --gv-success-border: #a2e9db;

    /* Status — warning */
    --gv-warning: #8a5a00;
    --gv-warning-ink: #6e4700;
    --gv-warning-subtle: #fffaeb;
    --gv-warning-border: #fbdf8e;

    /* Status — danger */
    --gv-danger: #be123c;
    --gv-danger-ink: #9f0f33;
    --gv-danger-subtle: #fff1f4;
    --gv-danger-border: #fdc3d0;

    /* Status — info */
    --gv-info: #1b45c4;
    --gv-info-ink: #16389e;
    --gv-info-subtle: #eff5ff;
    --gv-info-border: #bcd4ff;

    /* Code & syntax */
    --gv-code-bg: #f4f2ed;
    --gv-code-border: #dedbd3;
    --gv-code-fg: #141416;
    --gv-code-key: #0f6b63;
    --gv-code-str: #8a4300;
    --gv-code-num: #1b45c4;
    --gv-code-bool: #be123c;
    --gv-code-null: #6b675e;
    --gv-code-comment: #6b675e;
    --gv-code-punc: #6b675e;

    /* Gradients — the only two gradients in the system */
    --gv-gradient-accent: linear-gradient(120deg, var(--gv-ember-500), var(--gv-amber-600));
    --gv-gradient-fade: linear-gradient(to bottom, transparent, var(--gv-surface));

    /* Elevation — light. Warm-black shadows; never pure #000. */
    --gv-shadow-0: none;
    --gv-shadow-1: 0 1px 2px rgba(20,18,16,.05), 0 0 0 1px rgba(20,18,16,.04);
    --gv-shadow-2: 0 2px 4px -1px rgba(20,18,16,.06), 0 4px 12px -2px rgba(20,18,16,.08);
    --gv-shadow-3: 0 4px 8px -2px rgba(20,18,16,.06), 0 12px 24px -4px rgba(20,18,16,.10);
    --gv-shadow-4: 0 8px 16px -4px rgba(20,18,16,.08), 0 24px 48px -8px rgba(20,18,16,.14);
    --gv-shadow-5: 0 16px 32px -8px rgba(20,18,16,.10), 0 40px 72px -12px rgba(20,18,16,.18);
    --gv-shadow-inset: inset 0 1px 2px rgba(20,18,16,.06);
    --gv-highlight: none;

    /* Skeleton */
    --gv-skeleton-base: var(--gv-neutral-150);
    --gv-skeleton-sheen: var(--gv-neutral-50);

    /* Selection */
    --gv-selection-bg: var(--gv-ember-100);
    --gv-selection-fg: var(--gv-ember-900);

  --gv-ring-color: var(--gv-accent-ink);
  --gv-focus-ring: 0 0 0 var(--gv-ring-offset) var(--gv-bg),
                   0 0 0 calc(var(--gv-ring-offset) + var(--gv-ring-width)) var(--gv-ring-color);

  /* Data-viz — 6 categorical series, ordered by first use. */
  --gv-viz-1: var(--gv-ember-500);
  --gv-viz-2: var(--gv-azure-600);
  --gv-viz-3: var(--gv-teal-600);
  --gv-viz-4: var(--gv-amber-600);
  --gv-viz-5: var(--gv-violet-600);
  --gv-viz-6: var(--gv-rose-600);
}

/* -----------------------------------------------------------------------------
   2b. SEMANTIC — dark
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

    /* Canvas & surfaces */
    --gv-bg: #0c0c0b;
    --gv-bg-subtle: #141312;
    --gv-bg-muted: #191817;
    --gv-bg-inset: #080807;
    --gv-surface: #141312;
    --gv-surface-hover: #191817;
    --gv-surface-active: #201f1d;
    --gv-surface-raised: #191817;
    --gv-overlay: rgba(5,4,4,0.66);

    /* Foreground */
    --gv-fg: #f3f2f0;
    --gv-fg-secondary: #a5a29b;
    --gv-fg-muted: #8d8a83;
    --gv-fg-subtle: #726f69;
    --gv-fg-on-accent: #2b0b00;
    --gv-fg-on-solid: #0c0c0b;
    --gv-fg-inverse: #0c0c0b;

    /* Borders */
    --gv-border: #2d2c29;
    --gv-border-strong: #3d3b37;
    --gv-border-control: #6d6a64;
    --gv-border-accent: #ff6a4d;

    /* Accent */
    --gv-accent: #ff6a4d;
    --gv-accent-ink: #ff6a4d;
    --gv-accent-solid: #ff6a4d;
    --gv-accent-hover: #ffa189;
    --gv-accent-active: #ffc7b8;
    --gv-accent-subtle: #241009;
    --gv-accent-muted: #31160c;
    --gv-accent-border: #4d2214;
    --gv-accent-2: #ffa14d;

    /* Status — success */
    --gv-success: #2dd4bf;
    --gv-success-ink: #5fd6c2;
    --gv-success-subtle: #07211f;
    --gv-success-border: #0f4740;

    /* Status — warning */
    --gv-warning: #fbbf24;
    --gv-warning-ink: #f7c94f;
    --gv-warning-subtle: #241a05;
    --gv-warning-border: #4a3608;

    /* Status — danger */
    --gv-danger: #fb7185;
    --gv-danger-ink: #fb9cb1;
    --gv-danger-subtle: #2a0d15;
    --gv-danger-border: #571b2a;

    /* Status — info */
    --gv-info: #7dd3fc;
    --gv-info-ink: #a8e0fd;
    --gv-info-subtle: #08202b;
    --gv-info-border: #123b4d;

    /* Code & syntax */
    --gv-code-bg: #141312;
    --gv-code-border: #2d2c29;
    --gv-code-fg: #e8e6e3;
    --gv-code-key: #2dd4bf;
    --gv-code-str: #fbbf24;
    --gv-code-num: #7dd3fc;
    --gv-code-bool: #fb7185;
    --gv-code-null: #8d8a83;
    --gv-code-comment: #8d8a83;
    --gv-code-punc: #8d8a83;

    /* Gradients */
    --gv-gradient-accent: linear-gradient(120deg, var(--gv-ember-400), var(--gv-amber-400));
    --gv-gradient-fade: linear-gradient(to bottom, transparent, var(--gv-surface));

    /* Elevation — dark. Deeper shadows plus a 1px top highlight, because
       shadow alone does not read as elevation on a near-black canvas. */
    --gv-shadow-0: none;
    --gv-shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.045);
    --gv-shadow-2: 0 2px 6px -1px rgba(0,0,0,.55), 0 6px 16px -4px rgba(0,0,0,.45);
    --gv-shadow-3: 0 6px 14px -4px rgba(0,0,0,.6), 0 14px 32px -8px rgba(0,0,0,.5);
    --gv-shadow-4: 0 10px 24px -6px rgba(0,0,0,.65), 0 28px 56px -12px rgba(0,0,0,.55);
    --gv-shadow-5: 0 18px 40px -10px rgba(0,0,0,.7), 0 48px 88px -16px rgba(0,0,0,.6);
    --gv-shadow-inset: inset 0 1px 2px rgba(0,0,0,.5);
    --gv-highlight: inset 0 1px 0 rgba(255,255,255,.045);

    /* Skeleton */
    --gv-skeleton-base: var(--gv-neutral-875);
    --gv-skeleton-sheen: var(--gv-neutral-850);

    /* Selection */
    --gv-selection-bg: rgba(255,106,77,.28);
    --gv-selection-fg: #ffffff;

  --gv-ring-color: var(--gv-accent);
  --gv-focus-ring: 0 0 0 var(--gv-ring-offset) var(--gv-bg),
                   0 0 0 calc(var(--gv-ring-offset) + var(--gv-ring-width)) var(--gv-ring-color);

  --gv-viz-1: var(--gv-ember-400);
  --gv-viz-2: var(--gv-azure-400);
  --gv-viz-3: var(--gv-teal-400);
  --gv-viz-4: var(--gv-amber-400);
  --gv-viz-5: var(--gv-violet-400);
  --gv-viz-6: var(--gv-rose-400);
}

/* System preference, only when the user has expressed no choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

        /* Canvas & surfaces */
        --gv-bg: #0c0c0b;
        --gv-bg-subtle: #141312;
        --gv-bg-muted: #191817;
        --gv-bg-inset: #080807;
        --gv-surface: #141312;
        --gv-surface-hover: #191817;
        --gv-surface-active: #201f1d;
        --gv-surface-raised: #191817;
        --gv-overlay: rgba(5,4,4,0.66);

        /* Foreground */
        --gv-fg: #f3f2f0;
        --gv-fg-secondary: #a5a29b;
        --gv-fg-muted: #8d8a83;
        --gv-fg-subtle: #726f69;
        --gv-fg-on-accent: #2b0b00;
        --gv-fg-on-solid: #0c0c0b;
        --gv-fg-inverse: #0c0c0b;

        /* Borders */
        --gv-border: #2d2c29;
        --gv-border-strong: #3d3b37;
        --gv-border-control: #6d6a64;
        --gv-border-accent: #ff6a4d;

        /* Accent */
        --gv-accent: #ff6a4d;
        --gv-accent-ink: #ff6a4d;
        --gv-accent-solid: #ff6a4d;
        --gv-accent-hover: #ffa189;
        --gv-accent-active: #ffc7b8;
        --gv-accent-subtle: #241009;
        --gv-accent-muted: #31160c;
        --gv-accent-border: #4d2214;
        --gv-accent-2: #ffa14d;

        /* Status — success */
        --gv-success: #2dd4bf;
        --gv-success-ink: #5fd6c2;
        --gv-success-subtle: #07211f;
        --gv-success-border: #0f4740;

        /* Status — warning */
        --gv-warning: #fbbf24;
        --gv-warning-ink: #f7c94f;
        --gv-warning-subtle: #241a05;
        --gv-warning-border: #4a3608;

        /* Status — danger */
        --gv-danger: #fb7185;
        --gv-danger-ink: #fb9cb1;
        --gv-danger-subtle: #2a0d15;
        --gv-danger-border: #571b2a;

        /* Status — info */
        --gv-info: #7dd3fc;
        --gv-info-ink: #a8e0fd;
        --gv-info-subtle: #08202b;
        --gv-info-border: #123b4d;

        /* Code & syntax */
        --gv-code-bg: #141312;
        --gv-code-border: #2d2c29;
        --gv-code-fg: #e8e6e3;
        --gv-code-key: #2dd4bf;
        --gv-code-str: #fbbf24;
        --gv-code-num: #7dd3fc;
        --gv-code-bool: #fb7185;
        --gv-code-null: #8d8a83;
        --gv-code-comment: #8d8a83;
        --gv-code-punc: #8d8a83;

        /* Gradients */
        --gv-gradient-accent: linear-gradient(120deg, var(--gv-ember-400), var(--gv-amber-400));
        --gv-gradient-fade: linear-gradient(to bottom, transparent, var(--gv-surface));

        /* Elevation — dark. Deeper shadows plus a 1px top highlight, because
           shadow alone does not read as elevation on a near-black canvas. */
        --gv-shadow-0: none;
        --gv-shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.045);
        --gv-shadow-2: 0 2px 6px -1px rgba(0,0,0,.55), 0 6px 16px -4px rgba(0,0,0,.45);
        --gv-shadow-3: 0 6px 14px -4px rgba(0,0,0,.6), 0 14px 32px -8px rgba(0,0,0,.5);
        --gv-shadow-4: 0 10px 24px -6px rgba(0,0,0,.65), 0 28px 56px -12px rgba(0,0,0,.55);
        --gv-shadow-5: 0 18px 40px -10px rgba(0,0,0,.7), 0 48px 88px -16px rgba(0,0,0,.6);
        --gv-shadow-inset: inset 0 1px 2px rgba(0,0,0,.5);
        --gv-highlight: inset 0 1px 0 rgba(255,255,255,.045);

        /* Skeleton */
        --gv-skeleton-base: var(--gv-neutral-875);
        --gv-skeleton-sheen: var(--gv-neutral-850);

        /* Selection */
        --gv-selection-bg: rgba(255,106,77,.28);
        --gv-selection-fg: #ffffff;

    --gv-ring-color: var(--gv-accent);
    --gv-focus-ring: 0 0 0 var(--gv-ring-offset) var(--gv-bg),
                     0 0 0 calc(var(--gv-ring-offset) + var(--gv-ring-width)) var(--gv-ring-color);
    --gv-viz-1: var(--gv-ember-400);
    --gv-viz-2: var(--gv-azure-400);
    --gv-viz-3: var(--gv-teal-400);
    --gv-viz-4: var(--gv-amber-400);
    --gv-viz-5: var(--gv-violet-400);
    --gv-viz-6: var(--gv-rose-400);
  }
}

/* -----------------------------------------------------------------------------
   3. BRIDGE (optional) — legacy variable names
   Add class="gv-bridge" to <html> and every un-migrated stylesheet in the
   product inherits the system without being rewritten. This is the whole of
   audit Phase 1 in one block: it declares the 14 tokens `bands` never
   overrode, and it retires the indigo defaults everywhere at once.
   Delete it once every surface uses --gv-* directly.
   -------------------------------------------------------------------------- */
.gv-bridge {
  /* public site.css */
  --bg: var(--gv-bg);
  --bg-2: var(--gv-bg-subtle);
  --bg-3: var(--gv-bg-muted);
  --card-solid: var(--gv-surface);
  --surface: var(--gv-surface);
  --surface-2: var(--gv-bg-subtle);
  --surface-3: var(--gv-bg-muted);
  --border: var(--gv-border);
  --border-strong: var(--gv-border-strong);
  --border-control: var(--gv-border-control);
  --text: var(--gv-fg);
  --text-2: var(--gv-fg-secondary);
  --text-3: var(--gv-fg-muted);
  --accent: var(--gv-accent);
  --accent-ink: var(--gv-accent-ink);
  --accent-2: var(--gv-accent-2);
  --accent-soft: var(--gv-accent-muted);
  --gradient: var(--gv-gradient-accent);
  /* the 14 that had no override — these are the indigo leaks */
  --gradient-text: var(--gv-gradient-accent);
  --code-bg: var(--gv-code-bg);
  --code-border: var(--gv-code-border);
  --nav-bg: color-mix(in srgb, var(--gv-bg) 82%, transparent);
  --glow: 0 0 0 rgba(0,0,0,0);
  --glow-soft: 0 0 0 rgba(0,0,0,0);
  --grid-line: color-mix(in srgb, var(--gv-fg) 5%, transparent);
  --aurora-opacity: 0.18;
  --aurora-1: var(--gv-ember-300);
  --aurora-2: var(--gv-amber-300);
  --aurora-3: var(--gv-ember-200);
  --shadow: var(--gv-shadow-3);
  --shadow-sm: var(--gv-shadow-1);
  --success: var(--gv-success);
  --success-bg: var(--gv-success-subtle);
  --error: var(--gv-danger);
  --error-bg: var(--gv-danger-subtle);

  /* user app.css */
  --bg-card: var(--gv-surface);
  --bg-card-hover: var(--gv-surface-hover);
  --bg-raised: var(--gv-surface-raised);
  --bg-sidebar: var(--gv-bg-subtle);
  --bg-input: var(--gv-surface);
  --bg-glass: color-mix(in srgb, var(--gv-bg) 76%, transparent);
  --text-secondary: var(--gv-fg-secondary);
  --text-muted: var(--gv-fg-muted);
  --warning: var(--gv-warning);
  --warning-soft: var(--gv-warning-subtle);
  --danger: var(--gv-danger);
  --danger-soft: var(--gv-danger-subtle);
  --success-soft: var(--gv-success-subtle);
  --info: var(--gv-info);
  --info-soft: var(--gv-info-subtle);
  --ring: var(--gv-focus-ring);
  --shadow-card: var(--gv-shadow-1);
  --shadow-pop: var(--gv-shadow-3);

  /* partners portal */
  --fg: var(--gv-fg);
  --muted: var(--gv-bg-subtle);
  --muted-fg: var(--gv-fg-secondary);
  --card: var(--gv-surface);
  --primary: var(--gv-accent);
  --primary-fg: var(--gv-fg-on-accent);
  --destructive: var(--gv-danger);
  --radius: var(--gv-radius-lg);

  /* tokens docs.css referenced but nobody ever declared —
     this alone repairs the playground autocomplete dropdown */
  --line: var(--gv-border);
  --bg-soft: var(--gv-bg-subtle);
}

/* -----------------------------------------------------------------------------
   4. GLOBAL MOTION GUARD
   Applies to everything, including anything the bridge is feeding.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --gv-duration-instant: 1ms; --gv-duration-fast: 1ms; --gv-duration-base: 1ms;
    --gv-duration-slow: 1ms;    --gv-duration-slower: 1ms; --gv-duration-lazy: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}