/* Design tokens — every magic number lives here */
:root {
  /* ---- Color ---- */
  --color-bg:         #0B0E14;
  --color-bg-2:       #0E121B;
  --color-surface:    #141823;
  --color-surface-2:  #1B2030;
  --color-border:     #232A3A;
  --color-border-2:   #2C3447;

  --color-text:       #E8ECF1;
  --color-text-mut:   #8B95A7;
  --color-text-dim:   #5F6A7E;

  --color-success:    #5EEAD4;
  --color-warn:       #F5B86B;
  --color-risk:       #F47C7C;
  --color-quest-a:    #7C6FF0;
  --color-quest-b:    #A78BFA;

  --color-focus:      #5EEAD4;

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

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows / glows ---- */
  --glow-quest:   0 0 0 1px rgba(124,111,240,.25), 0 12px 48px -16px rgba(124,111,240,.45);
  --glow-success: 0 0 0 1px rgba(94,234,212,.22), 0 12px 48px -20px rgba(94,234,212,.35);
  --ring-soft:    inset 0 0 0 1px var(--color-border);
  --ring-strong:  inset 0 0 0 1px var(--color-border-2);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---- Type ---- */
  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   clamp(.78rem, .76rem + .1vw, .82rem);
  --fs-sm:   clamp(.88rem, .85rem + .15vw, .94rem);
  --fs-base: clamp(1rem, .96rem + .2vw, 1.06rem);
  --fs-md:   clamp(1.13rem, 1.08rem + .25vw, 1.22rem);
  --fs-lg:   clamp(1.4rem, 1.3rem + .5vw, 1.65rem);
  --fs-xl:   clamp(1.85rem, 1.6rem + 1.2vw, 2.35rem);
  --fs-h2:   clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-h1:   clamp(2.6rem, 1.8rem + 4.5vw, 4.6rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;

  /* ---- Layout ---- */
  --container: 1120px;
  --container-narrow: 760px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}