/* ==========================================================================
   PLOP! — the material.

   Everything on this site is meant to read as a printed object lying on a
   sunlit table: paper, ink, tape, crayon. So the tokens are named after what
   they are physically, not after a role in a design system — there is no
   "surface-2" here, there is paper and there is the table it sits on.

   The palette is printed, not lit: flat colour, almost no gradient, and the
   only shadows are the short ones a piece of paper actually casts.
   ========================================================================== */

:root {
  /* --- the printed colours ------------------------------------------- */
  --paper:      #FAF5E9;   /* warm paper: the table, and most objects on it */
  --paper-warm: #F4EBD8;   /* the same paper a little further into the sun */
  --ink:        #171717;
  --ink-soft:   #4A4644;

  --cobalt:    #1557D5;
  --tomato:    #F04F3D;
  --butter:    #F5C842;
  --grass:     #3D8B57;
  --turquoise: #31BFC3;
  --pink:      #F08DA8;
  --orange:    #F58A3C;

  /* the table itself, and what it becomes at the end of the day */
  --table:      #FAF5E9;
  --table-dusk: #2A1D18;

  /* --- type ----------------------------------------------------------- */
  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Impact, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hand:    'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  /* A display scale that stays enormous on a phone without overflowing it.
     Every step is clamped, so nothing here needs a media query later. */
  --t-mega:  clamp(3.2rem, 13.5vw, 10rem);
  --t-huge:  clamp(2.4rem, 8.6vw, 6.2rem);
  --t-big:   clamp(2rem, 7vw, 4.4rem);
  --t-mid:   clamp(1.5rem, 4.4vw, 2.6rem);
  --t-lead:  clamp(1.05rem, 2.1vw, 1.45rem);
  --t-body:  clamp(1rem, 1.4vw, 1.1rem);
  --t-small: 0.82rem;
  --t-tiny:  0.68rem;

  --track-display: -0.035em;   /* Archivo Black is loose at size */
  --track-label:   0.16em;

  /* --- paper physics --------------------------------------------------- */
  /* Short and close. A big blurry shadow reads as a floating card, which is
     the opposite of a photograph lying on a table. */
  --lift-scrap: 0 1px 2px rgba(60, 40, 20, .16), 0 2px 5px rgba(60, 40, 20, .10);
  --lift-card:  0 2px 4px rgba(60, 40, 20, .14), 0 6px 14px rgba(60, 40, 20, .12);
  --lift-photo: 0 3px 6px rgba(60, 40, 20, .16), 0 10px 24px rgba(60, 40, 20, .14);
  --lift-held:  0 8px 16px rgba(60, 40, 20, .18), 0 22px 44px rgba(60, 40, 20, .20);

  --edge: 1px solid rgba(23, 23, 23, .10);

  /* --- rotation --------------------------------------------------------- */
  /* The brief's rule, as tokens, so nothing invents its own tilt: most things
     within ±3deg, a few objects out to ±6, body copy never. */
  --tilt-xs: 0.6deg;
  --tilt-s:  1.4deg;
  --tilt-m:  2.6deg;
  --tilt-l:  4.5deg;
  --tilt-xl: 6deg;

  /* --- rhythm ----------------------------------------------------------- */
  --gap:   clamp(1rem, 2.4vw, 2rem);
  --leaf:  clamp(4.5rem, 11vw, 9rem);   /* space between chapters on the table */
  --measure: min(92vw, 1200px);         /* the table's content width, = g-wide */

  /* --- motion ----------------------------------------------------------- */
  /* Physical, not springy. The brief rules out cartoon bounce, so the only
     overshoot in the whole site is the two pixels a dropped object settles by. */
  --settle: cubic-bezier(.22, .68, .30, 1);
  --push:   cubic-bezier(.35, .00, .18, 1);
  --snap:   cubic-bezier(.30, .90, .40, 1);

  --t-fast: 180ms;
  --t-mid:  340ms;
  --t-slow: 620ms;

  --focus: 3px solid var(--cobalt);
}

/* The paper grain. One tiny SVG, tiled, at an opacity you can only see by
   turning it off — enough to stop large flat areas looking like a screen, not
   enough to sit between the reader and the words. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.36'/%3E%3C/svg%3E");
}