/* ==========================================================================
   Vistaria design tokens (vx-tokens.css): the ONE token vocabulary for every
   surface: public site, scan report, customer app and the admin cockpit.
   Source of truth: the redesign spec §2 (PostHog grammar, Vistaria palette).

   Layout of this file
     1. Light theme on :root (default).
     2. Dark theme under html[data-theme="dark"]   (set by the boot script / toggle)
     3. The SAME dark block again under prefers-color-scheme for no-JS visitors.
        Blocks 2 and 3 must stay byte-identical: scripts/design_qa.py --only parity
        and tests/test_wave3_design_system.py diff them.
        Both dark blocks sit inside @media screen: a page printed from the dark
        theme prints on the LIGHT tokens (dark text on white paper). Before,
        light-grey text came out on white (results_paid: 6,631 of 12,721 glyph
        runs under 4.5:1).
     4. The hue hook ([data-hue] / [data-status]) that every component reads.
     (The §9.3 legacy alias layer — --ink, --emerald, --surface … and the
     *-rgb triplets — was deleted on 2026-10-03: once the PLATE/fusion sheets
     were gone nothing read an alias any more.)

   Rules
     · Components never branch on theme. A value that differs between themes is
       a token here, defined in BOTH dark blocks.
     · No value in the "Agentina band" (OKLCH h 30-75deg, C > .10, L > .55).
     · *-solid, --vx-on-solid, --vx-on-bright, --vx-lime, --vx-gold are theme-
       invariant on purpose (same ratio on any ground).
   ========================================================================== */

/* ── 1. light ──────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  /* ── grounds: lightest-on-top ladder. desk < sunken < sheet < card ───── */
  --vx-desk:        #EEEFE9;  /* page ground, the "desk"; carries the dot grid */
  --vx-sheet:       #FDFDF8;  /* window/sheet body, taskbar, menus, reader column */
  --vx-card:        #FFFFFF;  /* cards, inputs, table body, keycap faces, modal */
  --vx-sunken:      #E5E7E0;  /* accent fill: table head, code head, window title bar, pressed, selected nav */
  --vx-sunken-2:    #D2D3CC;  /* stronger fill: pressed-on-sunken, meter track on sunken, neutral ledge */
  --vx-chrome:      #E5E7E0;  /* app/cockpit side-nav ground (PostHog app chrome #e5e7df) */
  --vx-inverse:     #23251D;  /* tooltip ground */
  --vx-on-inverse:  #FDFDF8;

  /* desk texture ("paper desk", site §5.1), parameters, not a picture */
  --vx-desk-dot:    rgb(17 17 17 / .055);
  --vx-desk-glow:   rgb(248 190 42 / .06);
  --vx-desk-pitch:  16px;

  /* ── lines ─────────────────────────────────────────────────────────── */
  --vx-line:         #BFC1B7;  /* DECORATIVE hairline: cards, tables, dividers (1.6–1.8:1, not a control boundary) */
  --vx-line-soft:    #D0D1C9;  /* dashed dividers, row separators, section divides */
  --vx-line-strong:  #9EA096;  /* hover border of cards/ghost buttons, neutral keycap bottom edge */
  --vx-line-control: #7F8175;  /* CONTROL boundary ≥3:1: input, select, textarea, checkbox, radio, switch track, neutral keycap */

  /* ── text ─────────────────────────────────────────────────────────── */
  --vx-ink:     #111111;  /* headings, primary labels, numbers */
  --vx-text:    #23251D;  /* body copy (PostHog "90% ink" equivalent, solid) */
  --vx-text-2:  #4D4F46;  /* secondary: descriptions, table cells, nav idle */
  --vx-text-3:  #65675E;  /* tertiary: meta, captions, placeholders, table headers (still ≥4.5) */
  --vx-text-disabled: #9EA096; /* ONLY for disabled controls (WCAG-exempt); never for information */

  /* ── interaction overlays (compose over any ground) ───────────────── */
  --vx-hover:  rgb(17 17 17 / .075);
  --vx-press:  rgb(17 17 17 / .05);
  --vx-scrim:  rgb(17 17 17 / .32);   /* modal/drawer backdrop, with blur(5px) */

  /* ── named hues (§2.3): swatch = icon/dot/chart/tint base; solid = fill that carries #FFF text;
        ink = text on any ground or on its own ≤15% tint ─────────────── */
  --vx-teal:    #0E8C7A;  --vx-teal-solid:   #0E7567;  --vx-teal-ink:   #0B6A5D;
  --vx-lime:    #BAE93C;  --vx-lime-solid:   #BAE93C;  --vx-lime-ink:   #42610F;   /* lime solid carries #111, never #FFF */
  --vx-gold:    #F8BE2A;  --vx-gold-solid:   #F8BE2A;  --vx-gold-ink:   #7F5300;   /* gold solid carries #111 */
  --vx-blue:    #2F80FA;  --vx-blue-solid:   #1858C8;  --vx-blue-ink:   #1858C8;
  --vx-purple:  #B62AD9;  --vx-purple-solid: #9420B3;  --vx-purple-ink: #9420B3;
  --vx-pink:    #E34C6F;  --vx-pink-solid:   #A8244F;  --vx-pink-ink:   #A8244F;
  --vx-green:   #36C46F;  --vx-green-solid:  #17653A;  --vx-green-ink:  #17653A;
  --vx-red:     #E5484D;  --vx-red-solid:    #AE1A1A;  --vx-red-ink:    #AE1A1A;
  --vx-sky:     #2EA2D3;  --vx-sky-solid:    #0F6189;  --vx-sky-ink:    #0F6189;
  --vx-lilac:   #8567FF;  --vx-lilac-solid:  #5B3FD6;  --vx-lilac-ink:  #5B3FD6;
  --vx-slate:   #4B5468;  --vx-slate-solid:  #4B5468;  --vx-slate-ink:  #4B5468;
  --vx-on-solid: #FFFFFF;   /* text on every *-solid except lime/gold */
  --vx-on-bright: #111111;  /* text on lime and gold, fixed in BOTH themes */
  --vx-on-danger: #FFFFFF;  /* text on a --vx-danger FILL (legacy --on-danger); 7.09:1 */

  /* ── semantic roles ───────────────────────────────────────────────── */
  --vx-accent:        #0E7567;  /* app accent: focus ring, tab indicator, checkbox/switch on, selected-row tint base, active nav icon */
  --vx-accent-hover:  #0B6A5D;
  --vx-on-accent:     #FFFFFF;
  --vx-accent-ink:    #0B6A5D;  /* accent used as text */
  --vx-accent-tint:   color-mix(in srgb, #0E7567 10%, transparent);

  --vx-link:          #0B6A5D;  /* UI/accent links ("Show breakdown", "See sample report") */
  --vx-link-hover:    #084F45;
  --vx-prose-link:    #111111;  /* long-form prose links: ink, underlined, 600 (site §7.7) */

  --vx-focus:         #0E7567;  /* 2px outline, 2px offset */
  --vx-selection:     rgb(186 233 60 / .45);  /* lime; ink on it 16:1 */
  --vx-mark:          rgb(248 190 42 / .30);  /* marker highlight (gold) */
  --vx-tape:          color-mix(in srgb, var(--vx-card) 72%, transparent);   /* masking tape on .vx-note: paper-white */
  --vx-hl-mix:        11%;                    /* .vx-hl tint strength */
  --vx-free-mix:      45%;                    /* .vx-hl--free tint strength */
  --vx-i-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%234D4F46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --vx-success: #17653A; --vx-success-bg: #DCFCE7; --vx-success-line: #05DF72;
  --vx-warning: #7F5300; --vx-warning-bg: #FEF9C2; --vx-warning-line: #FDC700;
  --vx-danger:  #AE1A1A; --vx-danger-bg:  #FFE2E2; --vx-danger-line:  #FF6467;
  --vx-info:    #1858C8; --vx-info-bg:    #FFFFFF; --vx-info-line:    #BFC1B7;   /* PostHog: info banner is a plain white card */

  /* ── the CTA keycap (site §4.1, recoloured to gold, §2.7) ─────────── */
  --vx-action-face:        #F8BE2A;
  --vx-action-face-hover:  #F8BE2A;   /* hover changes depth, not colour */
  --vx-action-ledge:       #C99208;
  --vx-action-edge:        #9A6B06;   /* 1.5px border of face + ledge; 4.05:1 on desk */
  --vx-action-edge-hover:  #7F5905;
  --vx-on-action:          #111111;   /* 11.1:1 on face */
  --vx-secondary-face:     #FFFFFF;   /* secondary keycap: white face on gold ledge */
  --vx-secondary-ledge:    #F8BE2A;
  --vx-secondary-edge:     #9A6B06;
  --vx-neutral-face:       #FFFFFF;   /* app default keycap */
  --vx-neutral-ledge:      #D2D3CC;
  --vx-neutral-edge:       #7F8175;   /* = line-control */
  --vx-neutral-edge-hover: #4D4F46;
  --vx-ledge:              #DADBD2;   /* flat elevation ledge: hovered card, menu, toast (app §3) */

  /* ── depth ────────────────────────────────────────────────────────── */
  --vx-shadow-sheet:  0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
  --vx-shadow-float:  0 25px 50px -12px rgb(0 0 0 / .25);
  --vx-shadow-bar:    0 12px 32px -14px rgb(0 0 0 / .22);
  --vx-shadow-menu:   0 10px 38px -10px rgb(22 23 24 / .35), 0 10px 20px -15px rgb(22 23 24 / .20);
  --vx-shadow-lift:   0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .10);
  --vx-shadow-modal:  0 16px 16px -16px rgb(0 0 0 / .35), 0 25px 50px -12px rgb(0 0 0 / .25);
  --vx-shadow-photo:  0 14px 28px -6px rgb(0 0 0 / .22);
  --vx-elev:          0 3px 0 var(--vx-ledge);
  --vx-scroll-shadow: rgb(17 17 17 / .14);   /* the edge shade of a box that scrolls sideways (.vx-table-wrap, .vx-code pre) */

  /* ── data viz (§2.6) ──────────────────────────────────────────────── */
  --vx-series-1:  #0E8C7A;  /* teal: Vistaria leads with its own hue */
  --vx-series-2:  #1F6FEB;  /* blue */
  --vx-series-3:  #A87A00;  /* gold, darkened for ≥3:1 on white */
  --vx-series-4:  #D6336C;  /* pink */
  --vx-series-5:  #5E8C12;  /* lime-olive */
  --vx-series-6:  #8B3FD1;  /* purple */
  --vx-series-7:  #1E8FC8;  /* sky */
  --vx-series-8:  #7C4A1E;  /* brown (L .46, outside the Agentina band) */
  --vx-series-9:  #6B5BFF;  /* lilac */
  --vx-series-10: #4B5468;  /* slate: "other", "previous period" */
  --vx-chart-grid:      color-mix(in srgb, var(--vx-ink) 6%, transparent);   /* dashed 3/3 */
  --vx-chart-axis:      color-mix(in srgb, var(--vx-ink) 35%, transparent);
  --vx-chart-crosshair: color-mix(in srgb, var(--vx-ink) 22%, transparent);
  --vx-chart-label:     var(--vx-text-3);

  /* ── shape ────────────────────────────────────────────────────────── */
  --vx-r-xs: 2px;  --vx-r-sm: 4px;  --vx-r-md: 6px;  --vx-r-lg: 10px;  --vx-r-xl: 20px;  --vx-r-full: 999px;
  --vx-bw: 1px;    --vx-bw-btn: 1.5px;
  --vx-ledge-room: 4.5px;   /* a md keycap's ledge (3px depth + 1.5px edge): the room a row of keycaps keeps under itself */

  /* ── spacing (4px base) ───────────────────────────────────────────── */
  --vx-0: 0;  --vx-1: 4px;  --vx-2: 8px;  --vx-3: 12px;  --vx-4: 16px;  --vx-5: 20px;  --vx-6: 24px;
  --vx-8: 32px;  --vx-10: 40px;  --vx-12: 48px;  --vx-16: 64px;  --vx-20: 80px;  --vx-24: 96px;

  /* ── layout ───────────────────────────────────────────────────────── */
  --vx-gutter:     8px;       /* desk gutter around taskbar and sheet (site §5.1) */
  --vx-w-sheet:    1200px;    /* marketing sheet max */
  --vx-w-prose:    42rem;     /* reading column: rem, never ch (Vazirmatn "0" is narrower) */
  --vx-w-narrow:   26rem;     /* auth card */
  --vx-w-app:      1440px;    /* app sheet content max */
  --vx-nav-w:      232px;     /* app side nav */
  --vx-nav-w-cockpit: 216px;
  --vx-bar-h:      44px;      /* public taskbar */
  --vx-scene-h:    52px;      /* app scene header */

  /* ── type (§3) ────────────────────────────────────────────────────── */
  --vx-font: "Open Runde", "Vx Runde Fallback", "Vx Runde Fallback R", "Vx Runde Fallback DV", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;   /* the two fallbacks are metric-matched (vx-base §1) */
  --vx-font-figures: "Vx Figures", var(--vx-font);
  --vx-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --vx-track-tight: -0.025em;
  --vx-track-head:  -0.02em;
  --vx-track-label: 0.06em;
  --vx-case-label:  uppercase;

  /* ── motion (§5) ──────────────────────────────────────────────────── */
  --vx-ease-standard: cubic-bezier(.4,0,.2,1);
  --vx-ease-out:      cubic-bezier(.215,.61,.355,1);
  --vx-ease-out-expo: cubic-bezier(.16,1,.3,1);
  --vx-ease-out-quint:cubic-bezier(.22,1,.36,1);
  /* impeccable-disable-next-line bounce-easing -- DESIGN.md "The One Spring Rule": the single ~10% overshoot, only for small things that appear (dialogs, tick, radio dot, boot card) */
  --vx-ease-back:     cubic-bezier(.34,1.56,.64,1);
  --vx-ease-in-sharp: cubic-bezier(.55,0,1,.45);
  --vx-ease-accordion:cubic-bezier(.87,0,.13,1);
  --vx-dur-instant: 50ms;  --vx-dur-press: 100ms;  --vx-dur-fast: 150ms;  --vx-dur-open: 200ms;
  --vx-dur-tile: 220ms;    --vx-dur-panel: 300ms;  --vx-dur-reveal: 600ms; --vx-dur-draw: 800ms;
  --vx-dur-count: 900ms;   --vx-dur-theme: 300ms;

  /* ── bidi (§7) ────────────────────────────────────────────────────── */
  --vx-dir: 1;              /* -1 under [dir=rtl]: multiply every X translate / tilt by it */

  /* ── z ladder (kept from the old system; components rely on it) ───── */
  --vx-z-raised: 5; --vx-z-sticky: 40; --vx-z-nav: 80; --vx-z-progress: 90;
  --vx-z-modal: 100; --vx-z-toast: 110; --vx-z-tooltip: 120;
}
[dir="rtl"]{ --vx-dir: -1; }
[dir="ltr"]{ --vx-dir: 1; }   /* an LTR island inside an RTL page restores it */

/* ── 2. dark (attribute) ───────────────────────────────────────────────── */
@media screen{
html[data-theme="dark"]{
  color-scheme: dark;

  --vx-desk:#1D1F27; --vx-sheet:#1E1F23; --vx-card:#25262B; --vx-sunken:#2D2E37; --vx-sunken-2:#383A47;
  --vx-chrome:#131316; --vx-inverse:#EDEEF4; --vx-on-inverse:#1E1F23;
  --vx-desk-dot: rgb(255 255 255 / .06);  --vx-desk-glow: rgb(248 190 42 / .05);

  --vx-line:#3E424F; --vx-line-soft:#32343F; --vx-line-strong:#626674; --vx-line-control:#858A9B;

  --vx-ink:#FAFAFA; --vx-text:#EDEEF4; --vx-text-2:#B0B4C4; --vx-text-3:#9499A9; --vx-text-disabled:#626674;

  --vx-hover: rgb(255 255 255 / .075); --vx-press: rgb(255 255 255 / .05); --vx-scrim: rgb(0 0 0 / .55);

  --vx-teal:#2EC4A8;   --vx-teal-ink:#29DBBB;
  --vx-lime:#BAE93C;   --vx-lime-ink:#BAE93C;
  --vx-gold:#F8BE2A;   --vx-gold-ink:#F8BE2A;
  --vx-blue:#5B9BFF;   --vx-blue-ink:#80B3FF;
  --vx-purple:#C77DF0; --vx-purple-ink:#E08FF5;
  --vx-pink:#F0679A;   --vx-pink-ink:#F993B3;
  --vx-green:#4ADE80;  --vx-green-ink:#4ADE80;
  --vx-red:#FF6B6B;    --vx-red-ink:#FF8A8A;
  --vx-sky:#4FC0EE;    --vx-sky-ink:#5CC3EE;
  --vx-lilac:#9C8FFF;  --vx-lilac-ink:#B3A6FF;
  --vx-slate:#9AA3B8;  --vx-slate-ink:#B0B4C4;
  /* *-solid values do NOT change: they carry #FFF (or #111) at the same ratio on any ground */

  --vx-accent:#BAE93C; --vx-accent-hover:#CDF26A; --vx-on-accent:#111111; --vx-accent-ink:#BAE93C;
  --vx-accent-tint: color-mix(in srgb, #BAE93C 6%, transparent);   /* 6%, not 12%: text-3 on a selected/hovered row must stay ≥4.5 (12% gave 3.94) */
  --vx-link:#BAE93C; --vx-link-hover:#D6F58A; --vx-prose-link:#FAFAFA;
  --vx-focus:#BAE93C;
  --vx-selection: rgb(186 233 60 / .30);
  --vx-mark: rgb(248 190 42 / .22);
  --vx-tape: color-mix(in srgb, var(--vx-text) 20%, transparent);   /* a card-coloured tape read as black tape in dark */
  --vx-hl-mix: 20%; --vx-free-mix: 18%;
  --vx-i-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23B0B4C4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --vx-on-danger:#111111;  /* on #FF8A8A */
  /* status grounds are 14% tints over the card (PostHog's #032E15 / #432004 / #460809 read as heavy slabs,
     the warning one as orange); ink on them stays >= 10:1 */
  --vx-success:#4ADE80; --vx-success-bg:color-mix(in srgb, var(--vx-success) 14%, var(--vx-card)); --vx-success-line:#0D542B;
  --vx-warning:#F8BE2A; --vx-warning-bg:color-mix(in srgb, var(--vx-warning) 14%, var(--vx-card)); --vx-warning-line:#733E0A;
  --vx-danger:#FF8A8A;  --vx-danger-bg:color-mix(in srgb, var(--vx-danger) 14%, var(--vx-card));  --vx-danger-line:#82181A;
  --vx-info:#80B3FF;    --vx-info-bg:#25262B;    --vx-info-line:#3E424F;

  --vx-action-face:#F8BE2A; --vx-action-face-hover:#F8BE2A; --vx-action-ledge:#926826;
  --vx-action-edge:#8E5B03; --vx-action-edge-hover:#5E4508; --vx-on-action:#111111;
  --vx-secondary-face:#1E1F23; --vx-secondary-ledge:#926826; --vx-secondary-edge:#F8BE2A;
  --vx-neutral-face:#25262B; --vx-neutral-ledge:#3A3D48; --vx-neutral-edge:#858A9B; --vx-neutral-edge-hover:#B0B4C4;
  --vx-ledge:#35373E;

  --vx-shadow-sheet: 0 4px 6px -1px rgb(0 0 0 / .35), 0 2px 4px -2px rgb(0 0 0 / .30);
  --vx-shadow-float: 0 25px 50px -12px rgb(0 0 0 / .60);
  --vx-shadow-bar:   0 12px 32px -14px rgb(0 0 0 / .55);
  --vx-shadow-menu:  0 10px 38px -10px rgb(0 0 0 / .65), 0 10px 20px -15px rgb(0 0 0 / .45);
  --vx-shadow-lift:  0 20px 25px -5px rgb(0 0 0 / .40), 0 8px 10px -6px rgb(0 0 0 / .35);
  --vx-shadow-modal: 0 16px 16px -16px rgb(0 0 0 / .70), 0 25px 50px -12px rgb(0 0 0 / .60);
  --vx-shadow-photo: 0 14px 28px -6px rgb(0 0 0 / .55);
  --vx-scroll-shadow: rgb(0 0 0 / .5);

  --vx-series-1:#2EC4A8; --vx-series-2:#5B9BFF; --vx-series-3:#F8BE2A; --vx-series-4:#F0679A; --vx-series-5:#9CCB38;
  --vx-series-6:#B57BF0; --vx-series-7:#4FC0EE; --vx-series-8:#C4A484; --vx-series-9:#9C8FFF; --vx-series-10:#9AA3B8;
}
}

/* ── 3. dark (no-JS mirror; IDENTICAL to block 2) ──────────────────────── */
@media screen{
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  color-scheme: dark;

  --vx-desk:#1D1F27; --vx-sheet:#1E1F23; --vx-card:#25262B; --vx-sunken:#2D2E37; --vx-sunken-2:#383A47;
  --vx-chrome:#131316; --vx-inverse:#EDEEF4; --vx-on-inverse:#1E1F23;
  --vx-desk-dot: rgb(255 255 255 / .06);  --vx-desk-glow: rgb(248 190 42 / .05);

  --vx-line:#3E424F; --vx-line-soft:#32343F; --vx-line-strong:#626674; --vx-line-control:#858A9B;

  --vx-ink:#FAFAFA; --vx-text:#EDEEF4; --vx-text-2:#B0B4C4; --vx-text-3:#9499A9; --vx-text-disabled:#626674;

  --vx-hover: rgb(255 255 255 / .075); --vx-press: rgb(255 255 255 / .05); --vx-scrim: rgb(0 0 0 / .55);

  --vx-teal:#2EC4A8;   --vx-teal-ink:#29DBBB;
  --vx-lime:#BAE93C;   --vx-lime-ink:#BAE93C;
  --vx-gold:#F8BE2A;   --vx-gold-ink:#F8BE2A;
  --vx-blue:#5B9BFF;   --vx-blue-ink:#80B3FF;
  --vx-purple:#C77DF0; --vx-purple-ink:#E08FF5;
  --vx-pink:#F0679A;   --vx-pink-ink:#F993B3;
  --vx-green:#4ADE80;  --vx-green-ink:#4ADE80;
  --vx-red:#FF6B6B;    --vx-red-ink:#FF8A8A;
  --vx-sky:#4FC0EE;    --vx-sky-ink:#5CC3EE;
  --vx-lilac:#9C8FFF;  --vx-lilac-ink:#B3A6FF;
  --vx-slate:#9AA3B8;  --vx-slate-ink:#B0B4C4;
  /* *-solid values do NOT change: they carry #FFF (or #111) at the same ratio on any ground */

  --vx-accent:#BAE93C; --vx-accent-hover:#CDF26A; --vx-on-accent:#111111; --vx-accent-ink:#BAE93C;
  --vx-accent-tint: color-mix(in srgb, #BAE93C 6%, transparent);   /* 6%, not 12%: text-3 on a selected/hovered row must stay ≥4.5 (12% gave 3.94) */
  --vx-link:#BAE93C; --vx-link-hover:#D6F58A; --vx-prose-link:#FAFAFA;
  --vx-focus:#BAE93C;
  --vx-selection: rgb(186 233 60 / .30);
  --vx-mark: rgb(248 190 42 / .22);
  --vx-tape: color-mix(in srgb, var(--vx-text) 20%, transparent);   /* a card-coloured tape read as black tape in dark */
  --vx-hl-mix: 20%; --vx-free-mix: 18%;
  --vx-i-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23B0B4C4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --vx-on-danger:#111111;  /* on #FF8A8A */
  /* status grounds are 14% tints over the card (PostHog's #032E15 / #432004 / #460809 read as heavy slabs,
     the warning one as orange); ink on them stays >= 10:1 */
  --vx-success:#4ADE80; --vx-success-bg:color-mix(in srgb, var(--vx-success) 14%, var(--vx-card)); --vx-success-line:#0D542B;
  --vx-warning:#F8BE2A; --vx-warning-bg:color-mix(in srgb, var(--vx-warning) 14%, var(--vx-card)); --vx-warning-line:#733E0A;
  --vx-danger:#FF8A8A;  --vx-danger-bg:color-mix(in srgb, var(--vx-danger) 14%, var(--vx-card));  --vx-danger-line:#82181A;
  --vx-info:#80B3FF;    --vx-info-bg:#25262B;    --vx-info-line:#3E424F;

  --vx-action-face:#F8BE2A; --vx-action-face-hover:#F8BE2A; --vx-action-ledge:#926826;
  --vx-action-edge:#8E5B03; --vx-action-edge-hover:#5E4508; --vx-on-action:#111111;
  --vx-secondary-face:#1E1F23; --vx-secondary-ledge:#926826; --vx-secondary-edge:#F8BE2A;
  --vx-neutral-face:#25262B; --vx-neutral-ledge:#3A3D48; --vx-neutral-edge:#858A9B; --vx-neutral-edge-hover:#B0B4C4;
  --vx-ledge:#35373E;

  --vx-shadow-sheet: 0 4px 6px -1px rgb(0 0 0 / .35), 0 2px 4px -2px rgb(0 0 0 / .30);
  --vx-shadow-float: 0 25px 50px -12px rgb(0 0 0 / .60);
  --vx-shadow-bar:   0 12px 32px -14px rgb(0 0 0 / .55);
  --vx-shadow-menu:  0 10px 38px -10px rgb(0 0 0 / .65), 0 10px 20px -15px rgb(0 0 0 / .45);
  --vx-shadow-lift:  0 20px 25px -5px rgb(0 0 0 / .40), 0 8px 10px -6px rgb(0 0 0 / .35);
  --vx-shadow-modal: 0 16px 16px -16px rgb(0 0 0 / .70), 0 25px 50px -12px rgb(0 0 0 / .60);
  --vx-shadow-photo: 0 14px 28px -6px rgb(0 0 0 / .55);
  --vx-scroll-shadow: rgb(0 0 0 / .5);

  --vx-series-1:#2EC4A8; --vx-series-2:#5B9BFF; --vx-series-3:#F8BE2A; --vx-series-4:#F0679A; --vx-series-5:#9CCB38;
  --vx-series-6:#B57BF0; --vx-series-7:#4FC0EE; --vx-series-8:#C4A484; --vx-series-9:#9C8FFF; --vx-series-10:#9AA3B8;
}
}
}

/* ── 4. hue hook (spec §4.0): data-hue / data-status set four variables ── */
[data-hue="teal"]  {--vx-h:var(--vx-teal);  --vx-h-solid:var(--vx-teal-solid);  --vx-h-ink:var(--vx-teal-ink);  --vx-h-on:var(--vx-on-solid)}
[data-hue="lime"]  {--vx-h:var(--vx-lime);  --vx-h-solid:var(--vx-lime-solid);  --vx-h-ink:var(--vx-lime-ink);  --vx-h-on:var(--vx-on-bright)}
[data-hue="gold"]  {--vx-h:var(--vx-gold);  --vx-h-solid:var(--vx-gold-solid);  --vx-h-ink:var(--vx-gold-ink);  --vx-h-on:var(--vx-on-bright)}
[data-hue="blue"],[data-status="info"]{--vx-h:var(--vx-blue);--vx-h-solid:var(--vx-blue-solid);--vx-h-ink:var(--vx-blue-ink);--vx-h-on:var(--vx-on-solid)}   /* info = blue (--vx-info), never the lilac product hue */
[data-hue="purple"]{--vx-h:var(--vx-purple);--vx-h-solid:var(--vx-purple-solid);--vx-h-ink:var(--vx-purple-ink);--vx-h-on:var(--vx-on-solid)}
[data-hue="pink"]  {--vx-h:var(--vx-pink);  --vx-h-solid:var(--vx-pink-solid);  --vx-h-ink:var(--vx-pink-ink);  --vx-h-on:var(--vx-on-solid)}
[data-hue="green"],[data-status="success"]{--vx-h:var(--vx-green);--vx-h-solid:var(--vx-green-solid);--vx-h-ink:var(--vx-green-ink);--vx-h-on:var(--vx-on-solid)}
[data-hue="red"],[data-status="danger"]   {--vx-h:var(--vx-red);  --vx-h-solid:var(--vx-red-solid);  --vx-h-ink:var(--vx-red-ink);  --vx-h-on:var(--vx-on-solid)}
[data-status="warning"]{--vx-h:var(--vx-gold);--vx-h-solid:var(--vx-gold-solid);--vx-h-ink:var(--vx-warning);--vx-h-on:var(--vx-on-bright)}
[data-hue="sky"]   {--vx-h:var(--vx-sky);   --vx-h-solid:var(--vx-sky-solid);   --vx-h-ink:var(--vx-sky-ink);   --vx-h-on:var(--vx-on-solid)}
[data-hue="lilac"] {--vx-h:var(--vx-lilac);--vx-h-solid:var(--vx-lilac-solid);--vx-h-ink:var(--vx-lilac-ink);--vx-h-on:var(--vx-on-solid)}
[data-hue="slate"] {--vx-h:var(--vx-slate); --vx-h-solid:var(--vx-slate-solid); --vx-h-ink:var(--vx-slate-ink); --vx-h-on:var(--vx-on-solid)}