/* ---------------------------
   Design Tokens — SlashSkill v2
   "Precision Utility" aesthetic
   Inspired by Linear, Raycast
   Dark-first, indigo accent
---------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Layout */
  --w: 1200px;
  --w-narrow: 720px;
  --w-sidebar: 280px;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;
  --radius-pill: 100px;

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Motion — Raycast spring-out ease */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 150ms;
  --t-ui: 250ms;
  --t-modal: 350ms;
  --t: 150ms var(--ease);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Topbar */
  --topbar-h: 56px;
}

/* ─── Dark theme (DEFAULT) ─── */
html,
html[data-theme="dark"] {
  --bg: #0a0a0b;
  --surface: #141415;
  --surface-2: #1e1e20;
  --surface-3: #27272a;

  --text: #ededef;
  --text-heading: #fafafa;
  --muted: #8b8b8e;
  --muted-2: #5a5a5d;

  --border: #2a2a2d;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* Indigo accent — the Linear vibe */
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-subtle: rgba(99, 102, 241, 0.12);
  --accent-text: #a5b4fc;

  --chip: rgba(255, 255, 255, 0.06);
  --chip-hover: rgba(255, 255, 255, 0.10);
  --chip-active: rgba(99, 102, 241, 0.15);

  --topbar: rgba(10, 10, 11, 0.80);
  --overlay: rgba(0, 0, 0, 0.60);

  color-scheme: dark;
}

/* ─── Light theme ─── */
html[data-theme="light"] {
  --bg: #f4f4f5;
  --surface: #f9f9fa;
  --surface-2: #ededef;
  --surface-3: #e4e4e7;

  --text: #18181b;
  --text-heading: #09090b;
  --muted: #71717a;
  --muted-2: #a1a1aa;

  --border: #e4e4e7;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);

  --accent: #4f46e5;
  --accent-hover: #6366f1;
  --accent-subtle: rgba(79, 70, 229, 0.08);
  --accent-text: #4338ca;

  --chip: rgba(0, 0, 0, 0.04);
  --chip-hover: rgba(0, 0, 0, 0.07);
  --chip-active: rgba(79, 70, 229, 0.10);

  --topbar: rgba(250, 250, 250, 0.80);
  --overlay: rgba(0, 0, 0, 0.40);

  color-scheme: light;
}