/* ========================================================================
   OVM DESIGN TOKENS — v1.0
   ======================================================================== */

:root {
  /* ——— BRAND ——— */
  --cyan-glow:   #1A82E6;
  --cyan-400:    #4FA3F7;
  --cyan-500:    #1A82E6;
  --cyan-600:    #1670C8;
  --cyan-700:    #0F5FAE;
  --cyan-grad:   linear-gradient(135deg, #4FA3F7 0%, #1670C8 100%);
  --cyan-grad-r: linear-gradient(90deg, #4FA3F7 0%, #1670C8 100%);

  /* ——— BRAND BLUE (flat, for buttons / tiers / price — matches site) ——— */
  --brand-blue:     #1A82E6;
  --brand-blue-700: #1670C8;

  /* ——— INK (dark) ——— */
  --ink-1000: #05080B;
  --ink-900:  #0B1117;
  --ink-800:  #141B23;
  --ink-700:  #1F2731;
  --ink-600:  #2B3641;
  --ink-500:  #3D4B58;
  --ink-400:  #8A95A3;
  --ink-300:  #B6BFC9;
  --ink-100:  #E6ECF2;
  --ink-50:   #F4F7FA;

  /* ——— BONE (light) ——— */
  --bone-0:   #FFFFFF;
  --bone-50:  #F7F8FA;
  --bone-100: #ECEFF3;
  --bone-200: #D5DBE3;
  --bone-300: #B1B9C4;
  --bone-500: #5A6573;
  --bone-700: #2F3743;
  --bone-900: #0E1622;

  /* ——— SUPPORT ——— */
  --success: #22C55E;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    #38BDF8;
  --violet:  #A78BFA;

  /* ——— RADIUS ——— */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;
  --r-btn: 3px;          /* squared-off buttons */

  /* ——— SPACE (4pt) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ——— TYPE SCALE ——— */
  --fs-display-xl: clamp(72px, 11vw, 180px);
  --fs-display-lg: clamp(48px, 7vw, 96px);
  --fs-h1: clamp(36px, 4.5vw, 64px);
  --fs-h2: clamp(28px, 3vw, 44px);
  --fs-h3: 24px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;

  --ff-display: 'Outfit', system-ui, sans-serif;   /* Gotham-style geometric sans */
  --ff-industrial: 'Archivo', system-ui, sans-serif;
  --ff-body: 'Manrope', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ——— MOTION ——— */
  --ease-quick: cubic-bezier(.2,.7,.2,1);
  --ease-smooth: cubic-bezier(.22,.8,.28,1);
  --ease-cinema: cubic-bezier(.16,1,.3,1);
  --dur-quick: 180ms;
  --dur-smooth: 420ms;
  --dur-cinema: 900ms;

  /* ——— SHADOWS ——— */
  --shadow-1: 0 4px 12px rgba(0,0,0,.12);
  --shadow-2: 0 10px 30px rgba(0,0,0,.2);
  --shadow-3: 0 20px 60px rgba(0,0,0,.28);
  --shadow-glow: 0 0 40px rgba(26,130,230,.35), 0 0 80px rgba(26,130,230,.18);
  --shadow-glow-strong: 0 0 60px rgba(26,130,230,.55), 0 0 120px rgba(26,130,230,.25);
}

/* ========================================================================
   THEME — DARK (default)
   ======================================================================== */
:root,
[data-theme="dark"] {
  --bg-base:     var(--ink-1000);
  --bg-section:  var(--ink-900);
  --bg-card:     var(--ink-800);
  --bg-elevated: var(--ink-700);
  --border:      rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text:        var(--ink-100);
  --text-muted:  var(--ink-400);
  --text-dim:    var(--ink-500);

  --glass-frost-bg: rgba(20,27,35,.55);
  --glass-frost-border: rgba(255,255,255,.08);
  --glass-clear-bg: rgba(255,255,255,.06);
  --glass-clear-border: rgba(255,255,255,.14);
  --glass-signal-bg: rgba(15,230,255,.06);
  --glass-signal-border: var(--cyan-500);

  --grid-line: rgba(255,255,255,.035);
  --grain-opacity: .06;
}

/* ========================================================================
   THEME — LIGHT
   ======================================================================== */
[data-theme="light"] {
  --bg-base:     var(--bone-50);
  --bg-section:  var(--bone-0);
  --bg-card:     var(--bone-0);
  --bg-elevated: var(--bone-0);
  --border:      rgba(14,22,34,.08);
  --border-strong: rgba(14,22,34,.16);
  --text:        var(--bone-900);
  --text-muted:  var(--bone-500);
  --text-dim:    var(--bone-300);

  --glass-frost-bg: rgba(255,255,255,.55);
  --glass-frost-border: rgba(14,22,34,.08);
  --glass-clear-bg: rgba(255,255,255,.35);
  --glass-clear-border: rgba(14,22,34,.10);
  --glass-signal-bg: rgba(30,159,209,.08);
  --glass-signal-border: var(--cyan-600);

  --grid-line: rgba(14,22,34,.04);
  --grain-opacity: .04;

  --shadow-glow: 0 0 30px rgba(26,130,230,.25), 0 0 70px rgba(26,130,230,.10);
}