/* ══════════════════════════════════════════════════════════════════════
 * HAIVEN BRAND TOKENS — SINGLE SOURCE OF TRUTH (Apple-clean spec)
 * ----------------------------------------------------------------------
 * This file defines the canonical Haiven palette, type, spacing, radius,
 * motion and focus ONCE. Every web surface (login, dashboard SPA, the
 * Today board, memory pages) derives from the tokens below. Change the
 * brand here → it flows everywhere that links this file.
 *
 * Load order matters: link this AFTER assets/design-system.css. The bridge
 * block at the END of this file re-points the legacy design-system tokens
 * (--color-primary*, --text-*, --bg-*, --border-*, --radius-*, --space-*)
 * at the new ones, so every existing component inherits the new look
 * without a rewrite.
 *
 * THE LOOK (what "Apple" means here)
 *   • Light-first. Page #FFFFFF, grouped/secondary surfaces #F5F5F7.
 *     Dark: page #000000, cards #1C1C1E, secondary #2C2C2E. No warm tints.
 *   • No gradients, no spotlights, no glass panels. The ONE exception is
 *     the top nav: backdrop-filter saturate(180%) blur(20px) over
 *     rgba(255,255,255,.72) light / rgba(0,0,0,.72) dark.
 *   • Separation is a 1px hairline, never a drop shadow at rest.
 *     Hairline = rgba(0,0,0,.08) light / rgba(255,255,255,.12) dark.
 *   • ONE accent, used sparingly: Haiven amber #D97706 (dark #F59E0B) for
 *     links, the selected nav/tab, the progress ring, the focus ring,
 *     small marks and the active chip's text + 1px border. NEVER a large
 *     amber fill with white text.
 *   • Primary button = #1D1D1F fill / white text (dark: #F5F5F7 / black).
 *   • System type (SF on Apple devices). Display 40/32 at 600 −0.02em,
 *     body 17/1.47, secondary 15, caption 13, tabular numerals, sentence
 *     case everywhere. No mono, no small caps, no eyebrows.
 *   • 8pt grid. 24px between groups, 48–64px between page sections.
 *   • Motion 150–200ms ease-out, opacity/transform only.
 *
 * CONTRAST SWEEP (WCAG 2.x relative luminance, measured on real surfaces)
 *
 *   LIGHT (page #FFFFFF · grouped #F5F5F7)
 *     --hv-light-text    #1D1D1F   16.8:1 page · 15.5:1 grouped
 *     --hv-light-text-2  #6E6E73    5.1:1 page ·  4.7:1 grouped   (AA body)
 *     --hv-light-text-3  #86868B    3.6:1 page ·  3.3:1 grouped   (17px+ /
 *                                   large text ONLY — never for small copy)
 *     --brand-primary    #D97706    3.2:1 page ·  2.9:1 grouped   (links,
 *                                   marks, ring; passes AA only as large
 *                                   text — keep accent text ≥17px or 600)
 *     white on #1D1D1F   16.8:1 (primary button)
 *     --status-error-text  #D70015  5.4:1 page   --status-ok-text #248A3D 4.4:1
 *
 *   DARK (page #000000 · card #1C1C1E · secondary #2C2C2E)
 *     --hv-dark-text     #F5F5F7   19.3:1 page · 15.6:1 card · 12.8:1 secondary
 *     --hv-dark-text-2   #A1A1A6    8.2:1 page ·  6.6:1 card ·  5.4:1 secondary
 *     --hv-dark-text-3   #86868B    5.8:1 page ·  4.7:1 card   (17px+ only)
 *     --brand-dark       #F59E0B    9.8:1 page ·  7.9:1 card
 *     black on #F5F5F7   19.3:1 (primary button)
 *     --status-error-text #FF453A  6.2:1 page   --status-ok-text #30D158 10.4:1
 *
 * Verified with a WCAG 2.x relative-luminance script; re-run before
 * changing any hex above. Status colors are Apple system colors and are
 * for MEANING (dots, counts, "overdue"), never identity.
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── CORE BRAND ───────────────────────────────────────────────────── */
  --brand-primary: #d97706; /* THE Haiven amber — light-surface accent */
  --brand-primary-rgb: 217, 119, 6;
  --brand-dark: #f59e0b; /* the same amber lifted for black surfaces */
  --brand-dark-rgb: 245, 158, 11;

  /* Legacy names kept so nothing downstream breaks (values = the spec). */
  --brand-on-dark: var(--brand-dark);
  --brand-on-dark-bright: var(--brand-dark);
  --brand-on-dark-ink: #000000;
  --brand-on-dark-glow: rgba(245, 158, 11, 0.28);
  --brand-on-dark-soft: rgba(245, 158, 11, 0.12);
  --brand-on-dark-border: var(--brand-dark);
  --brand-on-light: var(--brand-primary);
  --brand-on-light-deep: var(--brand-primary);
  --brand-on-light-soft: rgba(217, 119, 6, 0.1);
  --brand-on-light-border: var(--brand-primary);

  /* ── SEMANTIC STATUS (Apple system colors — MEANING, not decoration) ── */
  --status-success: #34c759;
  --status-warn: #ff9f0a;
  --status-error: #ff453a;
  --status-info: #0a84ff;
  /* readable status TEXT on light surfaces */
  --status-error-text-light: #d70015;
  --status-ok-text-light: #248a3d;
  --status-error-text-dark: #ff453a;
  --status-ok-text-dark: #30d158;

  /* ── DARK SURFACE RAMP (true black, iOS grouped) ───────────────────── */
  --hv-dark-bg: #000000; /* page */
  --hv-dark-card: #1c1c1e; /* grouped panels / cards / inputs */
  --hv-dark-elevated: #2c2c2e; /* secondary: menus, chips, nested */
  --hv-dark-hair: rgba(255, 255, 255, 0.12); /* hairline, never a hard border */
  --hv-dark-hair-soft: rgba(255, 255, 255, 0.08);
  --hv-dark-hair-strong: rgba(255, 255, 255, 0.2);
  --hv-dark-field-border: #3a3a3c;
  --hv-dark-text: #f5f5f7;
  --hv-dark-text-2: #a1a1a6;
  --hv-dark-text-3: #86868b;
  --hv-dark-text-disabled: #636366;
  --hv-dark-text-hint: #48484a;

  /* ── LIGHT SURFACE RAMP (white page, #F5F5F7 grouped) ──────────────── */
  --hv-light-bg: #ffffff; /* page */
  --hv-light-card: #ffffff; /* a card ON a grouped surface */
  --hv-light-sunk: #f5f5f7; /* grouped / secondary surface */
  --hv-light-hair: rgba(0, 0, 0, 0.08);
  --hv-light-hair-soft: rgba(0, 0, 0, 0.05);
  --hv-light-hair-strong: rgba(0, 0, 0, 0.16);
  --hv-light-field-border: #d2d2d7;
  --hv-light-text: #1d1d1f;
  --hv-light-text-2: #6e6e73;
  --hv-light-text-3: #86868b;
  --hv-light-text-disabled: #aeaeb2;
  --hv-light-text-hint: #c7c7cc;

  /* ── FONTS — the system stack; SF renders on Apple devices ─────────── */
  --font-display:
    -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, 'Helvetica Neue', Inter, sans-serif;
  --font-body:
    -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, 'Helvetica Neue', Inter, sans-serif;
  /* No mono in the UI. Kept (system mono, no import) for code/ID display only. */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* ── TYPE SCALE (px) ─────────────────────────────────────────────────── */
  --hv-fs-display: 40px; /* page headline (phone 32) */
  --hv-fs-display-m: 32px;
  --hv-fs-h1: 32px;
  --hv-fs-h1-m: 28px;
  --hv-fs-h2: 28px;
  --hv-fs-h3: 21px;
  --hv-fs-lead: 17px;
  --hv-fs-body: 17px; /* body — desktop AND mobile */
  --hv-fs-secondary: 15px; /* labels, meta, helper */
  --hv-fs-caption: 13px; /* captions, timestamps */
  --hv-fs-eyebrow: 13px; /* legacy name; eyebrows are gone — renders as caption */
  --hv-lh-body: 1.47;
  --hv-lh-tight: 1.1;
  --hv-tracking-eyebrow: 0;
  --hv-tracking-display: -0.02em;

  /* ── SPACING — 8pt grid (4pt half-step) ──────────────────────────────── */
  --hv-space-1: 4px;
  --hv-space-2: 8px;
  --hv-space-3: 12px;
  --hv-space-4: 16px;
  --hv-space-5: 20px;
  --hv-space-6: 24px;
  --hv-space-8: 32px;
  --hv-space-10: 40px;
  --hv-space-12: 48px;
  --hv-space-16: 64px;

  /* ── RADII (control 12 · grouped list / card 18 · pill 999) ──────────── */
  --hv-r-tile: 12px;
  --hv-r-btn: 12px;
  --hv-r-card: 18px;
  --hv-r-pill: 999px;

  /* ── SHADOWS — none at rest. Only floating layers (menus, modals) lift. ─ */
  --hv-shadow-card: none;
  --hv-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.12);
  --hv-shadow-card-dark: none;
  --hv-shadow-lift-dark: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* ── MOTION — ease-out, 150–200ms, opacity/transform only ─────────────── */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 180ms;
  --dur-slow: 200ms;

  /* ── CONTROLS ───────────────────────────────────────────────────────── */
  --hv-control-h: 50px; /* inputs + buttons */
  --hv-control-fs: 17px;
}

/* ── THEME → SEMANTIC (the few names components should reach for) ───────
 * Light is the default; dark via [data-theme="dark"] / .dark-mode on <html>
 * (the dashboard toggles it). A page that should follow the OS instead adds
 * class="hv-auto" to <html> (the login does). The :root:not(...) selector
 * mirrors design-system.css's prefers-color-scheme override at the same
 * specificity so this file always wins in light mode. */
:root,
.light-mode,
[data-theme='light'],
:root:not(.dark-mode):not([data-theme='dark']) {
  --hv-bg: var(--hv-light-bg);
  --hv-card: var(--hv-light-card);
  --hv-elevated: var(--hv-light-card);
  --hv-sunk: var(--hv-light-sunk);
  --hv-group: var(--hv-light-sunk);
  --hv-hair: var(--hv-light-hair);
  --hv-hair-soft: var(--hv-light-hair-soft);
  --hv-hair-strong: var(--hv-light-hair-strong);
  --hv-field-bg: #ffffff;
  --hv-field-border: var(--hv-light-field-border);
  --hv-text: var(--hv-light-text);
  --hv-text-2: var(--hv-light-text-2);
  --hv-text-3: var(--hv-light-text-3);
  --hv-text-disabled: var(--hv-light-text-disabled);
  --hv-text-hint: var(--hv-light-text-hint);
  --hv-accent: var(--brand-primary);
  --hv-accent-text: var(--brand-primary);
  --hv-accent-bright: var(--brand-primary);
  --hv-accent-ink: #ffffff;
  --hv-accent-soft: rgba(217, 119, 6, 0.1);
  --hv-accent-border: var(--brand-primary);
  --hv-btn-bg: #1d1d1f;
  --hv-btn-bg-hover: #2d2d30;
  --hv-btn-ink: #ffffff;
  --hv-nav-bg: rgba(255, 255, 255, 0.72);
  --hv-status-error-text: var(--status-error-text-light);
  --hv-status-ok-text: var(--status-ok-text-light);
  --hv-shadow-rest: var(--hv-shadow-card);
  --hv-shadow-raise: var(--hv-shadow-lift);
  --focus-ring: 0 0 0 2px var(--brand-primary);
  --focus-ring-outline: 2px solid var(--brand-primary);
  color-scheme: light;
}

.dark-mode,
[data-theme='dark'] {
  --hv-bg: var(--hv-dark-bg);
  --hv-card: var(--hv-dark-card);
  --hv-elevated: var(--hv-dark-elevated);
  --hv-sunk: var(--hv-dark-card);
  --hv-group: var(--hv-dark-card);
  --hv-hair: var(--hv-dark-hair);
  --hv-hair-soft: var(--hv-dark-hair-soft);
  --hv-hair-strong: var(--hv-dark-hair-strong);
  --hv-field-bg: var(--hv-dark-card);
  --hv-field-border: var(--hv-dark-field-border);
  --hv-text: var(--hv-dark-text);
  --hv-text-2: var(--hv-dark-text-2);
  --hv-text-3: var(--hv-dark-text-3);
  --hv-text-disabled: var(--hv-dark-text-disabled);
  --hv-text-hint: var(--hv-dark-text-hint);
  --hv-accent: var(--brand-dark);
  --hv-accent-text: var(--brand-dark);
  --hv-accent-bright: var(--brand-dark);
  --hv-accent-ink: #000000;
  --hv-accent-soft: rgba(245, 158, 11, 0.12);
  --hv-accent-border: var(--brand-dark);
  --hv-btn-bg: #f5f5f7;
  --hv-btn-bg-hover: #e5e5ea;
  --hv-btn-ink: #000000;
  --hv-nav-bg: rgba(0, 0, 0, 0.72);
  --hv-status-error-text: var(--status-error-text-dark);
  --hv-status-ok-text: var(--status-ok-text-dark);
  --hv-shadow-rest: var(--hv-shadow-card-dark);
  --hv-shadow-raise: var(--hv-shadow-lift-dark);
  --focus-ring: 0 0 0 2px var(--brand-dark);
  --focus-ring-outline: 2px solid var(--brand-dark);
  color-scheme: dark;
}

/* Opt-in system theme (login): <html class="hv-auto"> follows the OS. Same
 * values as the dark block above; duplicated because a media query cannot
 * join a selector list. */
@media (prefers-color-scheme: dark) {
  :root.hv-auto:not(.light-mode):not([data-theme='light']) {
    --hv-bg: var(--hv-dark-bg);
    --hv-card: var(--hv-dark-card);
    --hv-elevated: var(--hv-dark-elevated);
    --hv-sunk: var(--hv-dark-card);
    --hv-group: var(--hv-dark-card);
    --hv-hair: var(--hv-dark-hair);
    --hv-hair-soft: var(--hv-dark-hair-soft);
    --hv-hair-strong: var(--hv-dark-hair-strong);
    --hv-field-bg: var(--hv-dark-card);
    --hv-field-border: var(--hv-dark-field-border);
    --hv-text: var(--hv-dark-text);
    --hv-text-2: var(--hv-dark-text-2);
    --hv-text-3: var(--hv-dark-text-3);
    --hv-text-disabled: var(--hv-dark-text-disabled);
    --hv-text-hint: var(--hv-dark-text-hint);
    --hv-accent: var(--brand-dark);
    --hv-accent-text: var(--brand-dark);
    --hv-accent-bright: var(--brand-dark);
    --hv-accent-ink: #000000;
    --hv-accent-soft: rgba(245, 158, 11, 0.12);
    --hv-accent-border: var(--brand-dark);
    --hv-btn-bg: #f5f5f7;
    --hv-btn-bg-hover: #e5e5ea;
    --hv-btn-ink: #000000;
    --hv-nav-bg: rgba(0, 0, 0, 0.72);
    --hv-status-error-text: var(--status-error-text-dark);
    --hv-status-ok-text: var(--status-ok-text-dark);
    --hv-shadow-rest: var(--hv-shadow-card-dark);
    --hv-shadow-raise: var(--hv-shadow-lift-dark);
    --focus-ring: 0 0 0 2px var(--brand-dark);
    --focus-ring-outline: 2px solid var(--brand-dark);
    color-scheme: dark;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * BASE RULES — the type + a11y foundation every page inherits
 * ══════════════════════════════════════════════════════════════════════ */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--hv-fs-body);
  line-height: var(--hv-lh-body);
  /* design-system.css cross-fades body colors over 300ms; the spec is
     opacity/transform motion only, so theme flips are instant. */
  transition: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: var(--hv-tracking-display);
  line-height: var(--hv-lh-tight);
  font-weight: 600;
}
h1 {
  font-size: var(--hv-fs-h1);
}
h2 {
  font-size: var(--hv-fs-h2);
}
h3 {
  font-size: var(--hv-fs-h3);
}
@media (max-width: 640px) {
  h1 {
    font-size: var(--hv-fs-h1-m);
  }
}

/* Display headline: 40px desktop / 32px phone, 600, −0.02em, 1.1. */
.hv-display {
  font-family: var(--font-display);
  font-size: var(--hv-fs-display);
  font-weight: 600;
  letter-spacing: var(--hv-tracking-display);
  line-height: var(--hv-lh-tight);
}
@media (max-width: 640px) {
  .hv-display {
    font-size: var(--hv-fs-display-m);
  }
}

/* Legacy hook: eyebrows are gone. Anything still using the class renders
 * as a plain 13px sentence-case caption. */
.hv-eyebrow {
  font-family: var(--font-body);
  font-size: var(--hv-fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hv-text-2);
}

/* Numbers line up. */
.hv-num,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Focus (a11y) — one 2px accent ring; mouse sees nothing. */
:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ══════════════════════════════════════════════════════════════════════
 * GLOBAL REDUCED-MOTION FLOOR (WCAG 2.3.3)
 * Durations collapse to ~0 (not `none`) so transitionend/animationend
 * still fire and no JS breaks; iteration-count:1 kills infinite loops.
 * ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * BRIDGE — re-point the legacy design-system.css tokens at the new ones
 * ----------------------------------------------------------------------
 * Names are IDENTICAL to design-system.css so no component changes. Values
 * come from the ramps above. The light selector list mirrors every light
 * selector design-system.css uses (including its (0,3,0) prefers-color-
 * scheme override) so this block wins by source order.
 * ══════════════════════════════════════════════════════════════════════ */
:root,
.light-mode,
[data-theme='light'],
:root:not(.dark-mode):not([data-theme='dark']) {
  /* accent */
  --haiven-amber: var(--brand-primary);
  --haiven-amber-light: var(--brand-dark);
  --haiven-amber-dark: var(--brand-primary);
  --warm-amber: var(--brand-primary);
  --warm-amber-light: var(--brand-dark);
  --color-primary: var(--brand-primary);
  --color-primary-light: var(--brand-dark);
  --color-primary-dark: var(--brand-primary);
  --color-primary-alpha-10: rgba(217, 119, 6, 0.1);
  --color-primary-alpha-20: rgba(217, 119, 6, 0.2);
  --color-primary-alpha-30: rgba(217, 119, 6, 0.3);
  --accent-primary: var(--color-primary);
  --accent: var(--color-primary);
  --border-primary: var(--brand-primary);

  /* surfaces: page white, grouped #F5F5F7, cards white */
  --bg-base: var(--hv-bg);
  --bg-surface: var(--hv-group);
  --bg-elevated: var(--hv-card);
  --bg-primary: var(--hv-bg);
  --bg-secondary: var(--hv-group);
  --bg-hover: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --bg-glass-subtle: rgba(0, 0, 0, 0.02);
  --bg-glass-light: rgba(0, 0, 0, 0.04);
  --bg-glass-medium: rgba(0, 0, 0, 0.06);
  --bg-glass-heavy: rgba(0, 0, 0, 0.08);

  /* hairlines */
  --border-subtle: var(--hv-hair-soft);
  --border-default: var(--hv-hair);
  --border-strong: var(--hv-hair-strong);

  /* text (see contrast sweep in the header) */
  --text-primary: var(--hv-text);
  --text-secondary: var(--hv-text-2);
  --text-tertiary: var(--hv-text-3);
  --text-disabled: var(--hv-text-disabled);
  --text-hint: var(--hv-text-hint);
  --text-muted: var(--hv-text-2);
  --text-faint: var(--hv-text-3);
  --text-ghost: var(--hv-text-hint);

  /* shadows — none at rest; hover/floating layers only */
  --shadow-sm: none;
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: var(--hv-shadow-lift);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.18);
  --shadow-glow-amber: none;
  --shadow-glow-amber-lg: none;
  --shadow-glow-cyan: none;
  --shadow-glow-cyan-lg: none;
  --shadow-glow-green: none;
  --shadow-glow-green-lg: none;

  /* status */
  --success: var(--status-success);
  --warning: var(--status-warn);
  --error: var(--status-error);
  --info: var(--status-info);
  --color-success: var(--status-success);
  --color-warning: var(--status-warn);
  --color-error: var(--status-error);
  --color-info: var(--status-info);

  /* type scale */
  --text-xs: var(--hv-fs-caption); /* 13 */
  --text-sm: var(--hv-fs-secondary); /* 15 */
  --text-base: var(--hv-fs-body); /* 17 */
  --text-lg: 19px;
  --text-xl: 21px;
  --text-2xl: var(--hv-fs-h2); /* 28 */
  --text-3xl: var(--hv-fs-h1); /* 32 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* radii (12 / 18 / 999) */
  --radius-sm: 8px;
  --radius-md: var(--hv-r-tile);
  --radius-lg: var(--hv-r-card);
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-full: var(--hv-r-pill);

  /* spacing — 8pt grid */
  --space-1: var(--hv-space-2); /* 8  */
  --space-2: var(--hv-space-4); /* 16 */
  --space-3: var(--hv-space-6); /* 24 */
  --space-4: var(--hv-space-8); /* 32 */
  --space-5: var(--hv-space-10); /* 40 */
  --space-6: var(--hv-space-12); /* 48 */
  --space-8: var(--hv-space-16); /* 64 */

  /* motion */
  --timing-fast: var(--dur-fast);
  --timing-base: var(--dur-base);
  --timing-slow: var(--dur-slow);
  --ease-smooth: var(--ease-out);
  --ease-decelerate: var(--ease-out);
  --transition-fast: var(--timing-fast) var(--ease-out);
  --transition-base: var(--timing-base) var(--ease-out);
  --transition-slow: var(--timing-slow) var(--ease-out);
}

.dark-mode,
[data-theme='dark'] {
  --haiven-amber: var(--brand-dark);
  --warm-amber: var(--brand-dark);
  --color-primary: var(--brand-dark); /* 9.8:1 on page, 7.9:1 on card */
  --color-primary-light: var(--brand-dark);
  --color-primary-dark: var(--brand-primary);
  --color-primary-alpha-10: rgba(245, 158, 11, 0.1);
  --color-primary-alpha-20: rgba(245, 158, 11, 0.2);
  --color-primary-alpha-30: rgba(245, 158, 11, 0.3);
  --accent-primary: var(--color-primary);
  --accent: var(--color-primary);
  --border-primary: var(--brand-dark);

  --bg-base: var(--hv-bg);
  --bg-surface: var(--hv-card);
  --bg-elevated: var(--hv-elevated);
  --bg-primary: var(--hv-bg);
  --bg-secondary: var(--hv-card);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --bg-glass-subtle: rgba(255, 255, 255, 0.03);
  --bg-glass-light: rgba(255, 255, 255, 0.06);
  --bg-glass-medium: rgba(255, 255, 255, 0.09);
  --bg-glass-heavy: rgba(255, 255, 255, 0.12);

  --border-subtle: var(--hv-hair-soft);
  --border-default: var(--hv-hair);
  --border-strong: var(--hv-hair-strong);

  --text-primary: var(--hv-text);
  --text-secondary: var(--hv-text-2);
  --text-tertiary: var(--hv-text-3);
  --text-disabled: var(--hv-text-disabled);
  --text-hint: var(--hv-text-hint);
  --text-muted: var(--hv-text-2);
  --text-faint: var(--hv-text-3);
  --text-ghost: var(--hv-text-hint);

  --shadow-sm: none;
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: var(--hv-shadow-lift-dark);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-amber: none;
  --shadow-glow-amber-lg: none;
  --shadow-glow-cyan: none;
  --shadow-glow-cyan-lg: none;
}

/* Page backgrounds: design-system.css paints the dark body with !important
 * (#0a0a0c + blue/violet radials). Re-assert flat surfaces — no gradient,
 * no spotlight — in both themes. */
body {
  background: var(--hv-bg);
  color: var(--hv-text);
}
body.dark-mode,
body[data-theme='dark'],
[data-theme='dark'] body,
.dark-mode body {
  background: var(--hv-dark-bg) !important;
  background-image: none !important;
  color: var(--hv-dark-text);
}