/* Case the Wolf design tokens.
   Colours come from the characters: Case's suit and tie, Luna's fur,
   the sky and grass of the storybook world. */

@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/lilita-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Palette */
  --navy: #182158;        /* Case's suit: ink, outlines, dark blocks */
  --navy-2: #2a3680;
  --tie: #e22b2e;         /* Case's tie */
  --tie-dark: #a81519;
  --sun: #ffc928;         /* sunshine */
  --sun-dark: #d99a00;
  --lake: #1585ee;        /* sky and lake */
  --lake-dark: #0b5fb0;
  --lake-pale: #dcefff;
  --meadow: #2dbe6c;      /* grass */
  --meadow-dark: #178a48;
  --fox: #ff7a1a;         /* Luna */
  --fox-dark: #c85500;
  --snow: #ffffff;
  --mist: #f1f7ff;

  /* Type */
  --font-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;    /* 18px: early readers */
  --text-lg: 1.3125rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

  /* Space */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6.5rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1200px;

  /* Shape: inked outlines and hard drop shadows, like the artwork */
  --ink: 3px solid var(--navy);
  --lift: 0 6px 0 var(--navy);
  --lift-hover: 0 10px 0 var(--navy);
  --lift-press: 0 2px 0 var(--navy);
  --r-btn: 16px;
  --r-tile: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;

  /* Breakpoints (reference): 480 / 760 / 1100 */
}