/* ============================================================================
   Vibe Dashboard v2 — design tokens (single source of truth)
   Ported from _specs/dashboard-v2-ref.vibe. Every dashboard-v2 component reads
   these vars; do NOT hardcode hex values in component CSS. Fonts loaded in
   dashboard.html (Space Grotesk, Poppins 600, JetBrains Mono).

   Naming: --v-<group>-<role>. Groups: bg, border, text, accent, radius, font.
   The aliases at the bottom re-point the legacy pitch.css semantic vars
   (--bg/--card/--pink/…) at the new palette. pitch.css :root still defines the
   OLD magenta/cyan values, so these body.dash overrides are what keep the few
   surfaces still on legacy classnames — the in-place-reskinned Tasks screen and
   the shared wallet-picker base — rendering in the NEW design language.
   Deleting them reverts those surfaces to the old palette, so they stay until
   Tasks + wallet-picker are migrated off legacy classnames and dashboard.css is
   dropped from the two v2 pages (follow-up; see port summary).
   ============================================================================ */

body.dash {
  /* ---- surfaces ---- */
  --v-bg: #0E1435;          /* app background (Sep-2026 mock, Changelog §14) */
  --v-bg-deep: #070A1C;     /* deepest tier — pitch gradients (v4 mock) */
  --v-surface: #19203F;     /* card / panel */
  --v-inset: #212A50;       /* input / inset surface */
  --v-aside: #090D28;       /* sidebar */
  --v-footer: #0E1424;      /* sidebar footer band */
  --v-input: #151D40;       /* form input rest */
  --v-input-focus: #1B2450; /* form input focus */
  --v-disabled: #22305C;    /* disabled control */
  --v-elevated: #0F1730;    /* nested well */
  --v-tile: #141B36;        /* tile / inset box (FAQ, Settings) */
  --v-sheet: #0C1330;       /* mobile More bottom sheet */
  --v-hero: #0A0F28;        /* Confirm-wallet hero card (Sep-2026 mock @Confirm wallet) */
  --v-scrim: rgba(8, 11, 32, 0.74); /* modal / signing-overlay backdrop (v2-modal.css) */

  /* ---- borders ---- */
  --v-border: rgba(255, 255, 255, 0.07);       /* card outer */
  --v-border-soft: rgba(255, 255, 255, 0.06);  /* internal divider */
  --v-border-row: rgba(255, 255, 255, 0.04);   /* table row separator */
  --v-border-blue: rgba(47, 107, 255, 0.40);   /* blue outline control */
  --v-border-amber: rgba(224, 162, 60, 0.30);  /* action-needed card */
  --v-border-magenta: rgba(240, 107, 218, 0.16);

  /* ---- text ---- */
  --v-text: #F2F4F8;        /* primary */
  --v-heading: #F7F8FB;     /* page titles, hero figures, big totals */
  --v-text-2: #8B93A7;      /* secondary */
  --v-text-overline: #A6ADBB; /* body-alt: card-head overlines, revenue label */
  --v-text-3: #5C6577;      /* tertiary / muted */
  --v-text-table: #C6CBD6;  /* table body */
  --v-text-bright: #DFE4EE; /* emphasised value / table + ledger labels */
  --v-white: #FFFFFF;       /* avatar initials, badge-on-magenta text, primary .v2-btn text */

  /* ---- accents ---- */
  --v-blue: #2F6BFF;        /* primary button / active */
  --v-blue-hover: #2559E6;
  --v-link: #4F93FF;        /* text link */
  --v-link-hover: #7FB0FF;
  --v-green: #2FBE8A;       /* success */
  --v-amber: #E0A23C;       /* warning / action-needed */
  --v-magenta: #E93BD0;     /* special ledger events / referral-graph edges — load-bearing, do not change */
  --v-pink: #F06BDA;        /* v4 brand pink — badge foregrounds / brand accents (distinct from graph magenta) */
  --v-avatar: #FB923C;      /* wallet-footer + top-bar avatar tile */
  --v-logo-blue: #185DFD;   /* wordmark dot + collapsed-rail logo tile */
  --v-amber-dim: #8A7A4E;   /* amber notice dismiss (rest) */
  --v-cyan: #22D3EE;        /* network node accent */

  /* ---- accent tints (bg fills) ---- */
  --v-blue-tint: rgba(47, 107, 255, 0.10);
  --v-blue-tint-active: rgba(47, 107, 255, 0.12); /* active nav row (mock pixels: .12 over --v-aside) */
  --v-green-tint: rgba(47, 190, 138, 0.10);
  --v-amber-tint: rgba(224, 162, 60, 0.08);
  --v-magenta-tint: rgba(233, 59, 208, 0.10);
  --v-badge-tint: rgba(233, 59, 208, 0.16);    /* nav count badge fill (fg: --v-pink) */

  /* ---- radii ---- */
  --v-r-card: 12px;
  --v-r-nav: 8px;
  --v-r-btn: 8px;
  --v-r-input: 12px;
  --v-r-badge: 5px;
  --v-r-icon: 7px;
  --v-r-modal: 16px;        /* shared modal panel (v2-modal.css) */
  --v-r-hero: 22px;         /* Confirm-wallet hero card */
  --v-r-pill: 999px;

  /* ---- typography ---- */
  --v-font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --v-font-nav: "Poppins", var(--v-font);
  --v-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- layout ---- */
  --v-content-max: 1040px;
  --v-content-pad: 40px 44px 56px;
  --v-content-pad-mobile: 22px 16px 40px;
  --v-aside-w-collapsed: 72px;

  /* ---- controls ---- */
  --v-btn-h: 42px;
  --v-icon-btn: 26px;

  /* ---- design-upgrade S4 additions (network chrome / tasks) — additive only ---- */
  --v-graph-ground: #0A0F24;                    /* referral-graph canvas ground */
  --v-border-well: rgba(255, 255, 255, 0.08);   /* toolbar pill / control group on the well; also the 8% hairline on inset fields + Confirm panels */
  --v-border-card-dark: rgba(255, 255, 255, 0.09); /* graph child node card */
  --v-border-pink: rgba(233, 59, 208, 0.5);     /* MAKE IT FULLSCREEN outline */
  --v-violet: #9B6BFF;                          /* fullscreen kicker / root-card accent */
  --v-violet-text: #B98BFF;                     /* EXIT GRAPH text */
  --v-violet-muted: #A493D8;                    /* root-card mono sub */
  --v-violet-card-1: #2C2456;                   /* root-card gradient start */
  --v-violet-card-2: #241C46;                   /* root-card gradient end */
  --v-border-violet: rgba(155, 107, 255, 0.5);  /* root-card border */
  --v-border-violet-soft: rgba(155, 107, 255, 0.45); /* EXIT GRAPH outline */
  --v-pink-soft: #F5B8EE;                       /* root-card handle */
  --v-cyan-soft: #7CE7F7;                       /* child-card handle */
  --v-green-deep: #1E9E6E;                      /* tasks progress gradient start */
  --v-grid-dot: rgba(255, 255, 255, 0.05);      /* referral-graph dot-grid ink (mock: 1px dot, 24px tile) */

  /* ---- dashboard refresh Sep-15 (R1 shell) — additive only ---- */
  --v-link-glow: rgba(79, 147, 255, 0.70);      /* What's new unread-dot glow (tpl 117) */
  --v-border-amber-notice: rgba(224, 162, 60, 0.26); /* wallet banner outline (mock/overview.html tpl 160) */
  --v-surface-total: #1C244A;                   /* flat TOTAL row, Points BY VERSION (mock/points.html tpl 413, VIB-446) */

  /* ---- L25 tokens-polish (fleet 2026-09-25) — additive only ---- */
  --v-rose: #FF6B8A;                            /* danger: error / expired text (mock-inventory palette row "error/expired") */
  --v-border-control: rgba(255, 255, 255, 0.14); /* outline chip / control on a dark card (Confirm chips, Cancel) */
  --v-border-info: rgba(255, 255, 255, 0.22);   /* revenue-hero "i" dot ring (mock/overview.html) */
  --v-hover-tint: rgba(255, 255, 255, 0.025);   /* Overview stat-cell hover fill (mock/overview.html) */
  --v-shadow-hero: 0 40px 90px -46px rgba(0, 0, 0, 0.75); /* Confirm-wallet hero card drop shadow */

  /* --------------------------------------------------------------------------
     Legacy-var compatibility bridge — maps pitch.css semantic vars → new
     palette so legacy-classname surfaces (Tasks screen, wallet-picker base)
     render in new tokens instead of pitch.css's old magenta/cyan. KEEP until
     those are migrated off legacy classnames + dashboard.css is dropped from
     the v2 pages. See port summary.
     -------------------------------------------------------------------------- */
  --bg: var(--v-bg);
  --card: var(--v-surface);
  --card-2: var(--v-inset);
  --line: var(--v-border);
  --ink: var(--v-text);
  --muted: var(--v-text-2);
  --faint: var(--v-text-3);
  --pink: var(--v-blue);     /* legacy primary accent → new blue */
  --cyan: var(--v-link);
  --green: var(--v-green);
  --blue: var(--v-blue);
  --font: var(--v-font);
  --mono: var(--v-font-mono);
}

/* Body background: flat token bg (design has no funnel radial glow). */
body.dash {
  background: var(--v-bg);
  font-family: var(--v-font);
}

/* Shared type helpers used across ported components. */
.v-mono {
  font-family: var(--v-font-mono);
  font-variant-numeric: tabular-nums;
}
.v-overline {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-text-overline);
}
.v-num { font-variant-numeric: tabular-nums; }