/* ═══════════════════════════════════════════════════════════════
   BooCoo Design Tokens — "Electric Light" (locked 2026-07-28)
   THE single source of truth for brand values on every surface.
   Consumers: all website pages (link this file), Node generators
   (scripts/lib/brand-tokens.js parses it), HTML render templates
   (relative-path link). Canonical spec: .claude/design-system.md
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── Ground ─────────────────────────────────────────────── */
    --bg: #FFFFFF;              /* page ground — pure white, never cream */
    --tint: #F7F8FC;            /* alternating section ground */
    --card: #FFFFFF;            /* card surface (on tint sections) */
    --line: #ECECF2;            /* hairline borders */

    /* ── Ink ────────────────────────────────────────────────── */
    --ink: #0A0A14;             /* primary text, CTAs, device bezels */
    --gray: #4A4A5A;            /* secondary text (7.9:1 on white) */
    --faint: #8A8A99;           /* tertiary text, large sizes only */

    /* ── Brand gradient (sampled from AppGradients.assets
         [.blue,.teal], deepened for AA white/on-white text) ──── */
    --brand-blue: #0063D1;      /* from iOS systemBlue #007AFF */
    --brand-teal: #0F7A8D;      /* from iOS systemTeal #30B0C7 */
    --grad: linear-gradient(92deg, var(--brand-blue), var(--brand-teal));
    --grad-field: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-teal) 100%);

    /* ── App-sampled sibling gradients (deepened same way) ──── */
    --grad-networth: linear-gradient(135deg, #7E30C9, #1E8F47);  /* .purple→.green */
    --grad-debts: linear-gradient(135deg, #C22929, #B45309);      /* .red→.orange */

    /* ── Vitals bands — FILL register (pills, swatches, strips;
         gradient pairs) + colored shadows ─────────────────────── */
    --vital-1a: #16A34A; --vital-1b: #4ADE80;  /* Climbing strongly 90–100 */
    --vital-2a: #0D9488; --vital-2b: #2DD4BF;  /* Climbing 70–89 */
    --vital-3a: #2563EB; --vital-3b: #60A5FA;  /* Holding 50–69 */
    --vital-4a: #EA580C; --vital-4b: #FB923C;  /* Slipping 30–49 */
    --vital-5a: #DC2626; --vital-5b: #F87171;  /* Slipping fast 0–29 */

    /* ── Vitals bands — TEXT register (band words as colored
         text on white; every value ≥4.5:1) ───────────────────── */
    --vital-1-text: #15803D;
    --vital-2-text: #0F766E;
    --vital-3-text: #1D4ED8;
    --vital-4-text: #B45309;
    --vital-5-text: #B91C1C;

    /* ── Type ───────────────────────────────────────────────── */
    --font-mark: 'Gabarito', system-ui, sans-serif;      /* wordmark ONLY */
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif; /* everything else */

    /* ── Shape & shadow ─────────────────────────────────────── */
    --r-btn: 14px;
    --r-card: 22px;
    --r-panel: 28px;
    --r-pill: 100px;
    --shadow-card: 0 18px 44px rgba(37, 99, 235, 0.14);
    --shadow-device: 0 24px 70px rgba(37, 99, 235, 0.28), 0 12px 30px rgba(13, 148, 136, 0.18);

    /* ── Legacy aliases (old dark-shell names remapped so
         per-page styles keep working; remove in cleanup) ─────── */
    --text: var(--ink);
    --text-dim: var(--gray);
    --text-faint: var(--faint);
    --text-body: var(--gray);
    --glass: rgba(10, 10, 20, 0.04);
    --glass-border: var(--line);
    --glass-hover: rgba(10, 10, 20, 0.07);
    --nav-bg: rgba(255, 255, 255, 0.82);
    --footer-bg: var(--tint);
    --footer-border: var(--line);
    --card-shadow: rgba(37, 99, 235, 0.10);
    --phone-bg: var(--ink);
    --phone-border: rgba(10, 10, 20, 0.12);
    --phone-shadow: rgba(37, 99, 235, 0.22);
    --pill-bg: rgba(10, 10, 20, 0.04);
    --pill-border: var(--line);
    --chip-bg: rgba(10, 10, 20, 0.03);
    --chip-border: var(--line);
    --btn-ghost-bg: rgba(10, 10, 20, 0.04);
    --btn-ghost-border: rgba(10, 10, 20, 0.14);
    --btn-ghost-hover: rgba(10, 10, 20, 0.08);
    --btn-glow-shadow: rgba(37, 99, 235, 0.30);
    --btn-glow-shadow-hover: rgba(37, 99, 235, 0.45);
    --priv-link-color: var(--vital-2-text);
    --priv-link-border: rgba(15, 118, 110, 0.35);
    --step-line: var(--line);
    --pink: var(--brand-blue);     /* retired hue → nearest brand value */
    --violet: var(--brand-blue);
    --blue: var(--brand-blue);
    --cyan: var(--brand-teal);
    --lime: var(--vital-1-text);
    --orange: var(--vital-4-text);
    --orb-a: transparent; --orb-b: transparent; --orb-c: transparent;
    --orb-d: transparent; --orb-e: transparent;
    --grain-opacity: 0;
    --glow-opacity-start: 0; --glow-opacity-end: 0;
    --hover-glow-opacity: 0;
}