/*
 * Roll Call Field — Design Tokens
 * Unified with Roll Call Experiences color system.
 * Font: Syne (matching RC Experiences)
 */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;

  /* ── Surfaces — exact RC palette ── */
  --bg:       #0a0a0b;
  --surface:  #111113;
  --surface2: #18181b;
  --surface3: #1f1f23;
  --surface4: #262629;
  --surface5: #2d2d31;

  /* ── Borders ── */
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --border3:  rgba(255,255,255,0.20);

  /* ── Text ── */
  --text:     #f0eff4;
  --text2:    #8b8a96;
  --text3:    #55545f;
  --text4:    #38373f;

  /* ── Brand accent — RC purple ── */
  --purple:      #7c6af7;
  --purple2:     #a89ffe;
  --purple3:     #c4baff;
  --purple-dim:  rgba(124,106,247,0.13);
  --purple-glow: rgba(124,106,247,0.25);
  --purple-deep: rgba(124,106,247,0.06);

  /* Primary aliases */
  --accent:      var(--purple);
  --accent2:     var(--purple2);
  --accent-dim:  var(--purple-dim);
  --accent-glow: var(--purple-glow);

  /* ── Teal ── */
  --teal:     #0fd4ee;
  --teal2:    #40e0f5;
  --teal-dim: rgba(15,212,238,0.10);

  /* ── Orange ── */
  --orange:     #f97316;
  --orange2:    #fb923c;
  --orange-dim: rgba(249,115,22,0.12);

  /* ── Semantic ── */
  --green:     #3ecf8e;
  --green2:    #60dba8;
  --green-dim: rgba(62,207,142,0.10);
  --red:       #ef4444;
  --red2:      #f87171;
  --red-dim:   rgba(239,68,68,0.10);
  --amber:     #f59e0b;
  --amber-dim: rgba(245,158,11,0.10);
  --blue:      #3b82f6;
  --blue-dim:  rgba(59,130,246,0.11);

  /* ── Typography — Syne (matches RC Experiences) ── */
  --font:      'Syne', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* ── Fluid type scale ── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   clamp(15px,1.6vw,17px);
  --text-lg:   clamp(18px,2.2vw,22px);
  --text-xl:   clamp(22px,3vw,32px);
  --text-2xl:  clamp(30px,4.5vw,48px);
  --text-3xl:  clamp(42px,6.5vw,72px);

  /* ── Radius ── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ── Spacing ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  --sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;

  /* ── Shadows — RC style ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 24px rgba(124,106,247,0.20);
  --shadow-purple: 0 4px 20px rgba(124,106,247,0.25);

  /* ── Component sizes ── */
  --btn-h:    44px;
  --input-h:  48px;
  --sb-w:     230px;
  --topbar-h: 58px;

  /* ── Motion ── */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.4,0.64,1);
  --t-fast:   130ms var(--ease);
  --t-mid:    210ms var(--ease);  /* RC compat alias */
  --t-base:   210ms var(--ease);
  --t-slow:   320ms var(--ease-out);
  --t-spring: 280ms var(--ease-spring);
}

[data-theme="light"] {
  color-scheme: light;
  --bg:#f4f3fa;--surface:#ffffff;--surface2:#edecf5;--surface3:#e4e3ef;
  --surface4:#dadae8;--surface5:#d0cfde;
  --border:rgba(0,0,0,0.06);--border2:rgba(0,0,0,0.11);--border3:rgba(0,0,0,0.17);
  --text:#0b0a14;--text2:#3d3b56;--text3:#6d6b82;--text4:#a5a3b8;
  --purple:#6452e9;--purple2:#7c6af7;--purple3:#a89ffe;
  --purple-dim:rgba(100,82,233,0.11);--purple-glow:rgba(100,82,233,0.22);
  --purple-deep:rgba(100,82,233,0.05);
  --teal:#0899b0;--teal2:#0fd4ee;--teal-dim:rgba(8,153,176,0.10);
  --orange:#ea6c05;--orange2:#f97316;--orange-dim:rgba(234,108,5,0.10);
  --green:#22a573;--green2:#3ecf8e;--green-dim:rgba(34,165,115,0.10);
  --red:#dc2626;--red2:#ef4444;--red-dim:rgba(220,38,38,0.10);
  --amber:#b45309;--amber-dim:rgba(180,83,9,0.10);
  --shadow-xs:0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.09);
  --shadow-md:0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow:0 0 24px rgba(100,82,233,0.15);
}