/* CLIXHOUSE website: style/tokens.css
   The few numbers everything else is built from: the three colours, the two
   type families and their fluid scale, the spacing, the corners, and the
   room the crew need above whatever they stand on. Phone first: every size
   is its phone value, growing to the computer value by 1440 px wide. */

:root {
  /* colour: only these three (SPEC, Look) */
  --noche: #111111;
  --luz: #F2E300;
  --papel: #F6F3EC;

  /* type: CLIXHOUSE Display (drawn capitals) for headings, Inter for reading.
     Until the display face ships, headings fall back to Inter at its heaviest. */
  --font-display: "CLIXHOUSE Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* reading text is big and heavy: the crew draw the eye, the words answer with weight */
  --fs-small: 1.0625rem;                                         /* 17: the smallest on the site */
  --fs-body: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);        /* 19 -> 21 */
  --fs-lead: clamp(1.3125rem, 1.15rem + 0.55vw, 1.75rem);        /* 21 -> 28 */
  --fs-read: var(--fs-lead);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);               /* 24 -> 36 */
  --fs-h2: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);               /* 36 -> 72 */
  --fs-statement: clamp(2.5rem, 1.5rem + 4vw, 5rem);             /* 40 -> 80: one big line */
  --fs-say: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);              /* 24 -> 36: an owner's line */
  --fs-say-open: clamp(1.3125rem, 1rem + 1.1vw, 1.875rem);       /* 21 -> 30 */
  --fs-tag: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);        /* 17 -> 22 */
  --fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);                /* 43 -> 88 */

  --lh-text: 1.55;
  /* the drawn capitals are packed tight; small sizes need air between them */
  --ls-display: 0.02em;
  --ls-display-small: 0.045em;
  --lh-display: 0.98;
  --measure: 34em;                                               /* about 65 characters */

  /* space */
  --gutter: clamp(1.25rem, 4vw, 3rem);                           /* 20 -> 48 */
  --wrap: 75rem;                                                 /* 1200 */
  /* nothing runs into the screen's edge: every block keeps at least the gutter (2026-09-27) */
  --gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);                      /* 16 -> 32 */
  --stack: clamp(1.25rem, 1rem + 1vw, 2rem);                     /* between a heading and its words */
  --section-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  /* the crew's room: clear space above a perch, tall enough for a crew member
     standing on it (crew/world.js PERS box heights x the crew's scale, which is
     0.34 on a phone and 0.81 from about 1330 px wide, plus its 8 px margin) */
  --room: clamp(7rem, 19vw, 16rem);                              /* the five: 112 -> 256 */
  --room-big: clamp(9.5rem, 28vw, 23rem);                        /* Big: 152 -> 368 */

  /* corners: soft and blunt, like soap */
  --r-slab: clamp(1.125rem, 0.9rem + 0.7vw, 1.75rem);            /* 18 -> 28 */
  --r-card: clamp(1.375rem, 1.1rem + 0.8vw, 2rem);               /* 22 -> 32 */
  --r-pill: 999px;

  --head-h: 4.5rem;                                              /* the site header */
}

@media (min-width: 1000px) {
  :root { --head-h: 5.5rem; }
}