/* Design tokens: primitives → semantic roles → component values.
   One source for both themes; every component reads the semantic layer. */

:root {
  /* --- primitive ramps ------------------------------------------------- */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7546e8;
  --violet-700: #5b34c4;

  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;

  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;

  --navy-950: #0b1020;
  --navy-900: #111731;
  --navy-800: #171e32;
  --navy-700: #222b43;
  --navy-600: #2e3856;
  --slate-400: #94a3b8;
  --slate-100: #f8fafc;

  /* --- type ------------------------------------------------------------ */
  --font-sans: 'Vazirmatn', Tahoma, system-ui, -apple-system, sans-serif;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-md: 15.5px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;

  /* --- space / radius / elevation -------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- motion ---------------------------------------------------------- */
  --dur-press: 120ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --dur-celebrate: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- dark (default) ---------------------------------------------------- */
:root,
html[data-theme='dark'] {
  color-scheme: dark;

  --bg: var(--navy-950);
  --bg-glow-1: rgba(139, 92, 246, 0.22);
  --bg-glow-2: rgba(34, 211, 238, 0.14);
  --surface: var(--navy-800);
  --surface-2: var(--navy-700);
  --surface-3: var(--navy-600);
  --surface-glass: rgba(23, 30, 50, 0.72);
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.32);

  --text: var(--slate-100);
  --text-muted: #a6b0c3;
  --text-faint: #7b879e;

  --accent: var(--violet-500);
  --accent-strong: var(--violet-400);
  --accent-ink: #ffffff;
  --accent-tint: rgba(139, 92, 246, 0.16);
  --accent-dim: #2b2450;
  --accent-ring: rgba(139, 92, 246, 0.45);

  --accent2: var(--cyan-400);
  --accent2-tint: rgba(34, 211, 238, 0.16);
  --accent2-dim: #10303c;

  --success: var(--emerald-400);
  --success-dim: #12332a;
  --warning: var(--amber-400);
  --warning-dim: #3a2c10;
  --danger: var(--rose-400);
  --danger-dim: #3a1c2a;

  --shadow-sm: 0 2px 10px rgba(3, 6, 20, 0.4);
  --shadow-md: 0 10px 26px rgba(3, 6, 20, 0.45);
  --shadow-lg: 0 20px 48px rgba(3, 6, 20, 0.55);
  --scrim: rgba(6, 9, 22, 0.72);
}

/* --- light ------------------------------------------------------------- */
html[data-theme='light'] {
  color-scheme: light;

  --bg: #f6f7fb;
  --bg-glow-1: rgba(117, 70, 232, 0.12);
  --bg-glow-2: rgba(6, 182, 212, 0.1);
  --surface: #ffffff;
  --surface-2: #edf0fa;
  --surface-3: #e2e7f6;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --border: rgba(23, 32, 51, 0.1);
  --border-strong: rgba(23, 32, 51, 0.22);

  --text: #172033;
  --text-muted: #4d5972;
  --text-faint: #6b7690;

  --accent: var(--violet-600);
  --accent-strong: #6438d8;
  --accent-ink: #ffffff;
  --accent-tint: rgba(117, 70, 232, 0.1);
  --accent-dim: #ece5ff;
  --accent-ring: rgba(117, 70, 232, 0.4);

  --accent2: var(--cyan-500);
  --accent2-tint: rgba(6, 182, 212, 0.12);
  --accent2-dim: #dcf3f9;

  --success: #0f9f6e;
  --success-dim: #ddf6ec;
  --warning: #b45309;
  --warning-dim: #fdf0d8;
  --danger: #d92d5c;
  --danger-dim: #fde3ea;

  --shadow-sm: 0 2px 8px rgba(23, 32, 51, 0.08);
  --shadow-md: 0 10px 24px rgba(23, 32, 51, 0.1);
  --shadow-lg: 0 20px 44px rgba(23, 32, 51, 0.14);
  --scrim: rgba(23, 32, 51, 0.42);
}