/* ===========================================================================
   HypeVault Design Tokens — Linear-based dark system (see DESIGN.md)
   The single source of truth for color, type, space, radius, elevation.
   Everything downstream (base.css, components.css, the views) references these.
   =========================================================================== */

:root {
  /* --- Brand & accent (lavender-blue, used SCARCELY) --------------------- */
  --hv-primary: #5e6ad2;          /* primary CTA, brand mark, link emphasis  */
  --hv-primary-hover: #828fff;    /* CTA hover                               */
  --hv-primary-focus: #5e69d1;    /* focus tint / focus ring base           */
  --hv-brand-secure: #7a7fad;

  /* Focus ring = 2px primary-focus @ 50% (DESIGN.md elevation lvl 4) */
  --hv-focus-ring: 0 0 0 2px rgba(94, 105, 209, 0.5);

  /* --- Surface ladder (canvas + 4 lifts; never #000000) ----------------- */
  --hv-canvas: #010102;           /* the anchor — the dark IS the whitespace */
  --hv-surface-1: #0c0d10;        /* default cards / panels                  */
  --hv-surface-2: #141518;        /* featured / hovered cards                */
  --hv-surface-3: #1c1d21;        /* sub-nav, dropdowns                      */
  --hv-surface-4: #232428;        /* deepest lifted                          */

  /* Hairlines (run with the ladder) */
  --hv-hairline: #23252a;
  --hv-hairline-strong: #2f3137;  /* input focus / featured edge            */
  --hv-hairline-tertiary: #1a1c20;/* nested                                  */

  /* Subtle top-edge highlight for lifted panels (optional per DESIGN.md) */
  --hv-edge-highlight: rgba(255, 255, 255, 0.04);

  /* --- Ink scale -------------------------------------------------------- */
  --hv-ink: #f7f8f8;              /* headlines + emphasized body             */
  --hv-ink-muted: #d0d6e0;        /* secondary                               */
  --hv-ink-subtle: #8a8f98;       /* tertiary (deselected tabs, footer)      */
  --hv-ink-tertiary: #62666d;     /* disabled, footnotes                     */
  --hv-on-primary: #ffffff;       /* text on lavender CTA                    */
  --hv-inverse: #ffffff;          /* rare inverse CTA surface                */

  /* --- Semantic signals (the ONE allowed exception — R/A/G) ------------- */
  --hv-signal-high: #27a644;      /* 🟢 high profit margin                   */
  --hv-signal-mid: #e2a13b;       /* 🟠 mid-low margin                       */
  --hv-signal-none: #d4493f;      /* 🔴 no margin                            */

  /* Tinted backgrounds for signal/confidence chips (low-chroma fills) */
  --hv-signal-high-bg: rgba(39, 166, 68, 0.12);
  --hv-signal-mid-bg: rgba(226, 161, 59, 0.12);
  --hv-signal-none-bg: rgba(212, 73, 63, 0.12);
  --hv-signal-high-border: rgba(39, 166, 68, 0.32);
  --hv-signal-mid-border: rgba(226, 161, 59, 0.32);
  --hv-signal-none-border: rgba(212, 73, 63, 0.32);

  /* Modal scrim = pure black per DESIGN.md */
  --hv-scrim: rgba(0, 0, 0, 0.72);

  /* --- Spacing (base unit 4px) ----------------------------------------- */
  --hv-space-xxs: 4px;
  --hv-space-xs: 8px;
  --hv-space-sm: 12px;
  --hv-space-md: 16px;
  --hv-space-lg: 24px;
  --hv-space-xl: 32px;
  --hv-space-xxl: 48px;
  --hv-space-section: 96px;

  /* --- Radius ---------------------------------------------------------- */
  --hv-radius-xs: 4px;            /* chips / badges                          */
  --hv-radius-sm: 6px;            /* tags                                    */
  --hv-radius-md: 8px;            /* buttons, inputs (never pill CTAs)       */
  --hv-radius-lg: 12px;           /* cards                                   */
  --hv-radius-xl: 16px;           /* image / screenshot panels               */
  --hv-radius-xxl: 24px;          /* rare                                    */
  --hv-radius-pill: 9999px;       /* toggles, status pills, avatars          */

  /* --- Type families --------------------------------------------------- */
  --hv-font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hv-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* --- Type scale (size / weight / line / tracking) -------------------- */
  --hv-display-xl-size: 80px;   --hv-display-xl-track: -3px;   --hv-display-xl-line: 1.05;
  --hv-display-lg-size: 56px;   --hv-display-lg-track: -1.8px; --hv-display-lg-line: 1.10;
  --hv-display-md-size: 40px;   --hv-display-md-track: -1px;   --hv-display-md-line: 1.15;
  --hv-headline-size: 28px;     --hv-headline-track: -0.6px;   --hv-headline-line: 1.20;
  --hv-title-size: 22px;        --hv-title-track: -0.4px;       --hv-title-line: 1.25;
  --hv-subhead-size: 20px;      --hv-subhead-track: -0.2px;     --hv-subhead-line: 1.40;
  --hv-body-lg-size: 18px;      --hv-body-lg-track: -0.1px;     --hv-body-lg-line: 1.50;
  --hv-body-size: 16px;         --hv-body-track: -0.05px;       --hv-body-line: 1.50;
  --hv-body-sm-size: 14px;      --hv-body-sm-track: 0;          --hv-body-sm-line: 1.50;
  --hv-caption-size: 12px;      --hv-caption-track: 0;          --hv-caption-line: 1.40;
  --hv-button-size: 14px;       --hv-button-track: 0;           --hv-button-line: 1.20;
  --hv-eyebrow-size: 13px;      --hv-eyebrow-track: 0.4px;      --hv-eyebrow-line: 1.30;
  --hv-mono-size: 13px;         --hv-mono-track: 0;             --hv-mono-line: 1.50;

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

  /* --- Elevation (depth = ladder + hairlines; resist shadows on dark) --- */
  --hv-elev-1: none;
  --hv-elev-2: 0 1px 0 var(--hv-edge-highlight) inset;
  --hv-elev-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* --- Motion ---------------------------------------------------------- */
  --hv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hv-dur-fast: 90ms;
  --hv-dur: 140ms;

  /* --- Layout metrics -------------------------------------------------- */
  --hv-max-width: 1280px;
  --hv-sidebar-w: 240px;
  --hv-topbar-h: 56px;
  --hv-z-drawer: 60;
  --hv-z-topbar: 50;
  --hv-z-overlay: 70;
}