/* Design tokens: single source of truth. Dark-first. Contrast ratios noted vs --c-bg / --c-surface. */
:root {
  color-scheme: dark;
  /* Color: neutrals */
  --c-bg: #0b0b12;
  --c-surface: #15151f;      /* sheets, cards */
  --c-surface-2: #1e1e2b;    /* inputs, chips */
  --c-surface-3: #2a2a3a;    /* hover / pressed */
  --c-line: #33334a;
  --c-text: #f5f5fa;         /* 17.9:1 on bg */
  --c-text-2: #a6a6bd;       /* 7.4:1 on surface */
  --c-text-on-brand: #ffffff;
  /* Color: brand + semantic */
  --c-brand: #e0195f;        /* white text 6.0:1 */
  --c-brand-2: #6d4aff;      /* white text 5.1:1 */
  --c-brand-soft: #ff7aa8;   /* 7.1:1 on surface, for text/accents */
  --g-brand: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
  --c-xp: #ffc53d;           /* gold: XP, stars, playhead */
  --c-success: #3ddc97;
  --c-warn: #ffb547;
  --c-danger: #ff6b6b;       /* 6.3:1 on surface */
  --c-focus: #ffd23d;
  --c-scrim: rgb(5 5 10 / 0.72);

  /* Type scale (1.25 minor third, 16px base) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;   --fs-2xl: 2rem;    --fs-3xl: 3rem;
  --fw-regular: 450; --fw-semibold: 600; --fw-bold: 750; --fw-black: 850;
  --lh-tight: 1.15;  --lh-body: 1.45;

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

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Elevation */
  --e-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --e-2: 0 6px 18px rgb(0 0 0 / 0.45);
  --e-3: 0 16px 40px rgb(0 0 0 / 0.55);
  --e-glow: 0 8px 28px rgb(224 25 95 / 0.35);

  /* Sizing */
  --touch: 44px;
  --topbar-h: 56px;
  --toolbar-h: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 120ms; --d-med: 240ms; --d-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-med: 0ms; --d-slow: 0ms; }
}

/* v4.1: fluid type + space scale. Grows from 320px phones to 2560px desktops without breakpoints. */
:root {
  --fs-xs: clamp(11px, 0.70rem + 0.10vw, 0.8rem); /* v4.3: never below 11px, also on 320px phones */
  --fs-sm: clamp(0.84rem, 0.81rem + 0.12vw, 0.94rem);
  --fs-md: clamp(0.95rem, 0.92rem + 0.15vw, 1.06rem);
  --fs-lg: clamp(1.1rem, 1.04rem + 0.3vw, 1.35rem);
  --fs-xl: clamp(1.3rem, 1.18rem + 0.55vw, 1.75rem);
  --fs-2xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.6rem);
  --s-fluid: clamp(12px, 0.6rem + 1vw, 40px);
  --kb: 0px;
  --vvh: 100dvh;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}