/* Design tokens — see DESIGN.md for each token's role. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,800&family=Barlow:wght@400;500;600&family=Yellowtail&display=swap');

:root {
  color-scheme: dark;

  /* Neutrals */
  --ink-950: #0E0812;
  --ink-900: #1A1120;
  --ink-800: #2A1D31;
  --ink-700: #3D2C45;
  --ink-400: #9C8AA8;
  --ink-100: #F4EEF2;

  /* Roles */
  --neon-pink: #FF4F9A;
  --mission-red: #B3121F;
  --quest-teal: #12D6C8;
  --quest-navy: #0F2A33;
  --gold: #FFC83D;
  --success: #3DDC84;
  --error: #FF5A5A;

  /* Poster sky — washes and tints only, never text */
  --sunset-1: #643A62;
  --sunset-2: #92527A;
  --sunset-3: #9B87AA;
  --sunset-4: #F59A87;
  --sunset-5: #FBC1A7;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-sign: 'Yellowtail', cursive;
  --t-label: 13px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-caption: clamp(22px, 2.4vw, 28px);
  --t-h3: clamp(24px, 2.4vw, 28px);
  --t-h2: clamp(36px, 6vw, 64px);
  --t-display: clamp(56px, 11vw, 140px);

  /* Spacing (8-based) */
  --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;
  --content: 1120px;
  --measure: 64ch;
  --gutter: 16px;

  /* Shape and depth */
  --r-hud: 2px;
  --r-card: 10px;
  --r-pill: 999px;
  --shadow-card: 0 18px 40px rgb(0 0 0 / 0.5);
  --glow-pink: 0 0 0 2px var(--neon-pink), 0 0 24px rgb(255 79 154 / 0.45);
  --focus-ring: 3px solid var(--gold);

  /* Motion */
  --d-micro: 150ms;
  --d-ui: 250ms;
  --d-scene: 600ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* scroll-world engine theme */
  --sw-bg: var(--ink-950);
  --sw-ink: var(--ink-100);
  --sw-ink-soft: var(--ink-400);
  --sw-accent: var(--neon-pink);
  --sw-font-display: var(--font-display);
  --sw-font-body: var(--font-body);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}