/* ─────────────────────────────────────────────────────────────────
   BVC Design System · Tokens
   Canonical variables. Import this first; then components.css.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Surface ───────────────────────────────────────────────── */
  --bvc-bg:            #1a1d23;   /* app background */
  --bvc-bg-deep:       #0b1220;   /* behind video / iframes */
  --bvc-bg-panel:      rgba(10, 15, 20, 0.78);
  --bvc-bg-panel-2:    rgba(10, 15, 20, 0.62);
  --bvc-bg-glass:      rgba(255, 255, 255, 0.04);
  --bvc-bg-glass-hi:   rgba(255, 255, 255, 0.08);
  --bvc-bg-chip:       rgba(0, 0, 0, 0.16);
  --bvc-bg-chip-hi:    rgba(0, 0, 0, 0.25);
  --bvc-header-bg:     #000;

  /* ── Text ──────────────────────────────────────────────────── */
  --bvc-text:          rgba(255, 255, 255, 0.92);
  --bvc-text-strong:   rgba(255, 255, 255, 0.96);
  --bvc-muted:         rgba(255, 255, 255, 0.64);
  --bvc-muted-2:       rgba(255, 255, 255, 0.44);
  --bvc-muted-3:       rgba(255, 255, 255, 0.36);
  --bvc-faint:         rgba(255, 255, 255, 0.18);

  /* ── Lines / borders ──────────────────────────────────────── */
  --bvc-line:          rgba(255, 255, 255, 0.10);
  --bvc-line-hi:       rgba(255, 255, 255, 0.18);
  --bvc-line-hi-2:     rgba(255, 255, 255, 0.22);
  --bvc-line-soft:     rgba(255, 255, 255, 0.06);
  --bvc-card-border:   rgba(255, 255, 255, 0.14);

  /* ── Brand accents ─────────────────────────────────────────── */
  --bvc-sky:           #0ea5e9;
  --bvc-violet:        #a78bfa;
  --bvc-violet-deep:   #a855f7;
  --bvc-pink:          #f43d9b;
  --bvc-gradient:      linear-gradient(135deg, #0ea5e9, #a78bfa);
  --bvc-gradient-full: linear-gradient(90deg, #0ea5e9, #a78bfa, #f43d9b);

  /* ── Glows (for drift halos, focus rings, hover auras) ────── */
  --bvc-glow-sky:      rgba(14, 165, 233, 0.55);
  --bvc-glow-violet:   rgba(168, 85, 247, 0.48);
  --bvc-glow-pink:     rgba(244, 61, 155, 0.42);
  --bvc-glow-sky-s:    rgba(14, 165, 233, 0.25);
  --bvc-glow-sky-xs:   rgba(14, 165, 233, 0.20);

  /* ── Focus ─────────────────────────────────────────────────── */
  --bvc-focus-ring:    rgba(14, 165, 233, 0.55);

  /* ── Shadows ───────────────────────────────────────────────── */
  --bvc-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.25);
  --bvc-shadow-md:     0 12px 32px rgba(0, 0, 0, 0.30);
  --bvc-shadow-lg:     0 40px 140px rgba(0, 0, 0, 0.46), 0 14px 34px rgba(0, 0, 0, 0.30);
  --bvc-shadow-xl:     0 54px 180px rgba(0, 0, 0, 0.56), 0 18px 46px rgba(0, 0, 0, 0.34);
  --bvc-shadow-glow:   0 0 16px rgba(14, 165, 233, 0.20);
  --bvc-shadow-glow-s: 0 0 12px rgba(14, 165, 233, 0.25);

  /* ── Radius ────────────────────────────────────────────────── */
  --bvc-r-xs:          4px;    /* badges */
  --bvc-r-sm:          8px;
  --bvc-r-md:          12px;
  --bvc-r-lg:          18px;   /* iframe / embed */
  --bvc-r-xl:          22px;   /* card, panel */
  --bvc-r-pill:        999px;  /* nav, footer, CTA */

  /* ── Spacing scale (clampy, responsive) ────────────────────── */
  --bvc-space-1:       4px;
  --bvc-space-2:       8px;
  --bvc-space-3:       12px;
  --bvc-space-4:       16px;
  --bvc-space-5:       22px;
  --bvc-space-6:       clamp(16px, 2.6vw, 26px);
  --bvc-space-7:       clamp(24px, 3vw, 36px);
  --bvc-space-8:       clamp(28px, 3.5vw, 44px);
  --bvc-space-9:       clamp(32px, 4.6vw, 54px);

  /* ── Type: families ────────────────────────────────────────── */
  --bvc-font-title:    "Figtree", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --bvc-font-body:     "DM Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ── Type: scale ───────────────────────────────────────────── */
  --bvc-fs-micro:      clamp(10px, 0.85vw, 11px);   /* labels */
  --bvc-fs-caption:    12px;                         /* footer, captions */
  --bvc-fs-small:      13px;                         /* nav pills */
  --bvc-fs-body:       clamp(12.5px, 1.05vw, 14px);  /* paragraphs */
  --bvc-fs-body-lg:    14px;                         /* card descriptions */
  --bvc-fs-h3:         clamp(13px, 1.1vw, 15px);     /* subsection heads */
  --bvc-fs-h2-card:    clamp(16px, 1.5vw, 20px);     /* card panel heads */
  --bvc-fs-h2:         clamp(18px, 2.1vw, 24px);     /* card titles */
  --bvc-fs-h1:         clamp(20px, 2.4vw, 30px);     /* intro marquee */
  --bvc-fs-wordmark:   clamp(14px, 1.8vw, 22px);

  /* ── Type: letter-spacing ──────────────────────────────────── */
  --bvc-tracking-tight:   0.02em;
  --bvc-tracking-snug:    0.03em;
  --bvc-tracking-normal:  0.04em;
  --bvc-tracking-wide:    0.06em;
  --bvc-tracking-wider:   0.08em;
  --bvc-tracking-widest:  0.14em;
  --bvc-tracking-mark:    0.5em;    /* wordmark spacing */

  /* ── Type: weights ─────────────────────────────────────────── */
  --bvc-fw-thin:       200;  /* wordmark */
  --bvc-fw-regular:    400;
  --bvc-fw-medium:     500;
  --bvc-fw-semi:       600;
  --bvc-fw-bold:       700;

  /* ── Motion ────────────────────────────────────────────────── */
  --bvc-ease-out:      cubic-bezier(0.2, 0.9, 0.2, 1);
  --bvc-ease-panel:    cubic-bezier(0.4, 0, 0.2, 1);
  --bvc-dur-fast:      180ms;
  --bvc-dur-med:       260ms;
  --bvc-dur-slow:      420ms;
  --bvc-dur-panel:     420ms;

  /* ── Blur (glass) ──────────────────────────────────────────── */
  --bvc-blur-card:     blur(16px) saturate(180%);
  --bvc-blur-chip:     blur(8px);
  --bvc-blur-pill:     blur(10px);

  /* ── Legacy aliases (for drop-in compatibility with shared.css) */
  --bg:            var(--bvc-bg);
  --text:          var(--bvc-text);
  --muted:         var(--bvc-muted);
  --card-border:   var(--bvc-card-border);
  --panel-bg:      var(--bvc-bg-panel);
  --panel-bg-2:    var(--bvc-bg-panel-2);
  --shadow:        var(--bvc-shadow-lg);
  --shadow-hover:  var(--bvc-shadow-xl);
  --glow-sky:      var(--bvc-glow-sky);
  --glow-violet:   var(--bvc-glow-violet);
  --glow-pink:     var(--bvc-glow-pink);
  --radius:        var(--bvc-r-xl);
  --font-title:    var(--bvc-font-title);
}