/* ==========================================================================
   DISPUTT DESIGN SYSTEM — tokens
   Surreal, oil-pastel / crayon look on deep burgundy. Colours are sampled from the
   reference drawings; the display face is Fraunces (soft + wonky), the text face Lora.
   ========================================================================== */

@font-face {
  font-family: 'Disputt Display';
  src: url('../assets/fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal; /* the file already is the italic cut; never ask for italic on top of it */
  font-display: swap;
}
@font-face {
  font-family: 'Disputt Text';
  src: url('../assets/fonts/lora.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Disputt Text';
  src: url('../assets/fonts/lora-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Burgundy: the page --------------------------------------------- */
  --burgundy-950: #2b0711;
  --burgundy-900: #3d0a18;
  --burgundy-800: #510f21;
  --burgundy-700: #6a1428; /* default page background */
  --burgundy-600: #841a33;
  --burgundy-500: #a62f38;

  /* ---- Crayon palette (sampled from the reference drawings) ----------- */
  --yellow: #fae025;
  --yellow-pale: #fff3a0;
  --yellow-deep: #d7b800;
  --lime: #7eba2d;
  --lime-light: #c4d74a;
  --lime-deep: #4c8a12;
  --orange: #f8852c;
  --orange-deep: #c9600f;
  --coral: #e55666;
  --coral-deep: #b73346;
  --pink: #f48b8f;
  --pink-pale: #f0c3c5;
  --pink-deep: #c9575e;
  --violet: #b170b4;
  --violet-deep: #7b3f9e;
  --blue: #2261c6; /* "loyal" screen; 4.7:1 against cream text */
  --blue-light: #88c6db;
  --blue-deep: #1a4aa6;
  --indigo: #2230c8;
  --teal: #1b838c;
  --teal-light: #53a0a7;
  --red: #c61a2b; /* "impostor" screen; 4.7:1 against cream text */
  --red-deep: #8f1220;

  /* "White" and "black" are never pure: a butter cream and a dark chocolate brown. The -rgb triplets exist so that
     translucent versions (rgb(var(--cream-rgb) / .5)) follow the palette instead of hard-coding it. */
  --cream: #f8e6b8; /* every "white": text on burgundy, paper cards, cream buttons, the QR code's background */
  --cream-dim: #dcc592; /* the edge under cream buttons */
  --ink: #3a2012; /* every "black": the logo and all text on light paper, the QR code's modules */
  --cream-rgb: 248 230 184;
  --ink-rgb: 58 32 18;
  --shadow-rgb: 32 12 6; /* hard crayon shadows: a dark warm brown, not black */

  /* ---- Semantic colours ------------------------------------------------ */
  --bg: var(--burgundy-700);
  --fg: var(--cream);
  --fg-muted: rgb(var(--cream-rgb) / 0.86);
  --surface: var(--burgundy-600);
  --surface-deep: var(--burgundy-800);
  --accent: var(--yellow);
  --good: var(--lime);
  --bad: var(--pink);
  --role-impostor: var(--red);
  --role-loyal: var(--blue);
  --focus: var(--yellow);

  /* answer-option colours A–D */
  --opt-a: var(--lime);
  --opt-b: var(--orange);
  --opt-c: var(--pink);
  --opt-d: var(--blue-light);

  /* ---- Textures (generated by `npm run art`) --------------------------- */
  --tex-grain: url('../assets/textures/grain-soft.png'); /* grain.png with its alpha dialled down (tools/art/soften.mjs) */
  --tex-light: url('../assets/textures/crayon-light.png');
  --tex-light-soft: url('../assets/textures/crayon-light-soft.png'); /* big fields that carry body text */
  --tex-dark: url('../assets/textures/crayon-dark.png');

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Disputt Display', 'Fraunces', 'Cooper Black', 'Georgia', serif;
  --font-text: 'Disputt Text', 'Lora', 'Georgia', 'Times New Roman', serif;

  --fs-hero: clamp(3.6rem, 19vw, 6rem);
  --fs-h1: clamp(2.5rem, 12vw, 3.6rem);
  --fs-h2: clamp(1.8rem, 8vw, 2.3rem);
  --fs-h3: 1.4rem;
  --fs-lead: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.92rem;
  --fs-micro: 0.78rem;

  /* ---- Space (4px grid) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --page-x: max(1.1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --page-top: max(1rem, env(safe-area-inset-top));
  --page-bottom: max(1rem, env(safe-area-inset-bottom));

  /* ---- Shapes: nothing is a perfect rectangle ------------------------- */
  --r-btn: 26px 34px 28px 36px / 34px 27px 36px 29px;
  --r-card: 24px 30px 26px 32px / 30px 24px 32px 26px;
  --r-input: 18px 24px 20px 26px / 24px 18px 26px 20px;
  --r-blob: 58% 42% 54% 46% / 47% 56% 44% 53%;
  --r-sheet: 34px 40px 0 0 / 30px 26px 0 0;
  --r-pill: 999px;

  /* ---- Depth: hard "crayon" offsets instead of blurry shadows ---------- */
  --edge: rgb(var(--shadow-rgb) / 0.36);
  --shadow-1: 0 3px 0 var(--edge);
  --shadow-2: 0 6px 0 var(--edge);
  --shadow-3: 0 10px 0 var(--edge);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* ---- Layout ------------------------------------------------------------ */
  --app-width: 30rem;
}