/* Design tokens — moved from the approved mockup
 * <kit>/mockups/playmojo.co/a-mojo-deck.html (:root), 2026-10-30.
 * Values are the mockup's own; additions are marked "added".
 * Palette is fixed by the brief §2.1. */
:root {
  /* ── Colour: brief palette (mockup) ──────────────────────────────────── */
  --color-bg: #10141D;
  --color-bg-2: #1C2330;
  --color-brand: #A855F7;
  --color-accent: #F59E0B;
  --color-text: #FFFFFF;
  --color-text-2: #B7C0D0;
  --color-button: #9333EA;
  --color-button-hover: #A24BF0;

  /* surfaces — tinted neutrals (mockup) */
  --surface-0: #10141D;
  --surface-1: #161B26;
  --surface-2: #1C2330;
  --surface-3: #252D3D;
  --line: rgb(183 192 208 / .12);
  --line-strong: rgb(183 192 208 / .22);
  --tint-brand: color-mix(in oklab, var(--color-brand) 16%, transparent);
  --tint-accent: color-mix(in oklab, var(--color-accent) 16%, transparent);

  /* added: states and feedback */
  --color-button-active: color-mix(in oklab, var(--color-button) 82%, black);
  --color-error: #FF8A8A;          /* 7.4:1 on --surface-2 */
  --color-error-bg: rgb(255 138 138 / .1);
  --color-success: #4ADE80;        /* 9:1 on --surface-2 */
  --color-success-bg: rgb(74 222 128 / .1);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-accent) 55%, transparent);

  /* ── Typography (mockup) ─────────────────────────────────────────────── */
  --font-display: "Unbounded", "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.1rem, 1.2rem + 3.6vw, 4.6rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .75rem;
  --fs-page-h1: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem);   /* added: inner pages */
  --lh-tight: 1.05;
  --lh-base: 1.6;

  /* ── Space (added: 8px scale; sections from the mockup) ─────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --section-y: clamp(72px, 9vw, 136px);

  /* ── Shape & depth (mockup) ──────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 6px 16px -8px rgb(0 0 0 / .5);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .4), 0 18px 40px -16px rgb(0 0 0 / .7);
  --shadow-3: 0 2px 4px rgb(0 0 0 / .4), 0 32px 64px -24px rgb(6 4 20 / .9);

  /* ── Layout (mockup) ─────────────────────────────────────────────────── */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;

  /* ── Motion (mockup + added durations) ───────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 350ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-tabbar: 40;
  --z-header: 50;
  --z-drawer: 90;            /* above the cookie banner: an open menu must stay usable */
  --z-banner: 80;
  --z-modal: 100;
}

/* Breakpoints (constants, mockup): 1100 nav tightens · 900 drawer + tab bar · 520 phone.
   Reference widths in kit.config.json → breakpoints: 1440 / 390. */