/* ============================================================
   FocusRoom — Design Tokens
   Single source of truth for color, type, space, motion, depth.
   Dark-first. Light theme overrides live at the bottom.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-500: #6d5cff;
  --brand-400: #8b7dff;
  --brand-300: #a99eff;
  --brand-600: #5a49e0;
  --brand-glow: rgba(109, 92, 255, 0.35);

  --accent-teal: #34e0c4;
  --accent-amber: #ffb547;
  --accent-rose: #ff6b8b;
  --accent-green: #3ddc84;

  /* ---- Surfaces (dark) — subtle blue-violet undertone for depth ---- */
  --bg: #07070b;
  --bg-1: #0b0b11;
  --surface: #101017;
  --surface-2: #15151e;
  --surface-3: #1c1c27;
  --elevated: #1a1a24;

  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.11);

  /* ---- Text ---- */
  --text: #f2f2f7;
  --text-2: #b6b6c6;
  --text-3: #7c7c8c;
  --text-inv: #08080c;

  /* ---- Semantic ---- */
  --focus-ring: var(--brand-400);
  --success: #3ddc84;
  --warning: #ffb547;
  --danger: #ff5a6a;

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg, #8577ff 0%, #6d5cff 48%, #9a54ff 100%);
  --grad-hero: radial-gradient(120% 120% at 50% 0%, rgba(109,92,255,0.22) 0%, rgba(109,92,255,0) 55%);
  --grad-aurora: linear-gradient(120deg, #6d5cff 0%, #34e0c4 50%, #ff6b8b 100%);
  --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 60%);
  --grad-text: linear-gradient(180deg, #ffffff 0%, #c9c6e8 100%);

  /* ---- Typography ---- */
  --font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  /* ---- Depth — layered, soft, Vercel/Linear-grade ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 2px 6px -2px rgba(0,0,0,0.4), 0 12px 28px -10px rgba(0,0,0,0.55);
  --shadow-lg: 0 4px 12px -4px rgba(0,0,0,0.4), 0 32px 64px -24px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px rgba(109,92,255,0.4), 0 12px 40px -8px var(--brand-glow);
  --ring-inset: inset 0 1px 0 0 rgba(255,255,255,0.06);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 600ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --nav-h: 68px;
}

/* Light theme — kept tasteful; the product is dark-first but respects choice */
:root[data-theme="light"] {
  --bg: #f6f6fb;
  --bg-1: #eeeef5;
  --surface: #ffffff;
  --surface-2: #fafaff;
  --surface-3: #f0f0f7;
  --elevated: #ffffff;

  --line: rgba(10, 10, 20, 0.08);
  --line-strong: rgba(10, 10, 20, 0.14);

  --text: #14141c;
  --text-2: #4a4a5a;
  --text-3: #8a8a9a;
  --text-inv: #ffffff;

  --grad-surface: linear-gradient(180deg, rgba(10,10,30,0.02) 0%, rgba(0,0,0,0) 100%);
  --shadow-md: 0 8px 24px -10px rgba(30,30,60,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(30,30,60,0.24);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms;
  }
}