/* ==========================================================================
   Design tokens
   Follows the system color scheme (light/dark) with no JS dependency.
   ========================================================================== */
:root {
  color-scheme: light dark;

  /* Brand */
  --accent: light-dark(#6a38ee, #a68bff);
  --accent-strong: light-dark(#5527d4, #c0adff);
  --accent-soft: light-dark(rgb(106 56 238 / 0.10), rgb(166 139 255 / 0.14));
  --accent-contrast: light-dark(#ffffff, #14102b);
  --accent-gradient: linear-gradient(135deg, #7c4dff, #3d5afe);

  /* Surfaces */
  --bg: light-dark(#f5f4fb, #0b0a15);
  --bg-glow: light-dark(rgb(124 77 255 / 0.10), rgb(124 77 255 / 0.18));
  --surface: light-dark(#ffffff, #14121f);
  --surface-2: light-dark(#f0eef9, #1c1930);
  --border: light-dark(#e1def0, #2b2744);
  --border-strong: light-dark(#c9c4e0, #3d3860);

  /* Text */
  --text: light-dark(#17142b, #f2f0fb);
  --text-2: light-dark(#4b4666, #b8b3cf);
  --text-muted: light-dark(#625d7e, #9993b4);

  /* Status */
  --danger: light-dark(#c62828, #ff8a8a);
  --danger-soft: light-dark(rgb(198 40 40 / 0.08), rgb(255 138 138 / 0.12));
  --warning: light-dark(#8a5a00, #ffc247);
  --success: light-dark(#17753a, #62e08f);
  --success-soft: light-dark(rgb(23 117 58 / 0.10), rgb(98 224 143 / 0.14));

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace;
  --fs-sm: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --fs-base: clamp(0.92rem, 0.9rem + 0.15vw, 1rem);
  --fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-xl: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  --fs-hero: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);

  /* Space & shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 2px rgb(20 10 60 / 0.06), 0 6px 18px rgb(20 10 60 / 0.06);
  --shadow-2: 0 10px 40px rgb(60 30 160 / 0.18);
  --ring: 0 0 0 3px light-dark(rgb(106 56 238 / 0.35), rgb(166 139 255 / 0.45));

  --content-width: 72rem;
}