/* ============================================================
   Tydy · tokens.css
   The single source of colour, type, and spacing.
   Imported by every surface: www, cleaner, desk.
   Never define a colour anywhere else.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- brand ---- */
  --soot:#1E1B17;          /* INK ONLY. Type, hairlines, button shadows. Never a background. */
  --paper:#F3EFE7;         /* base surface */
  --paper-2:#EAE4D8;       /* second surface — fields, quiet fills */
  --clay:#C9BBA8;          /* third surface — rails, panels, anything sitting back */
  --clay-deep:#B3A48F;     /* clay borders, card lips */
  --line:#D8CFBF;          /* hairlines */
  --citron:#C4CE4A;        /* the yes. Primary actions, done states. */
  --citron-deep:#AAB63A;   /* citron hover, citron borders */
  --citron-ink:#4B5312;    /* text ON a citron ground */
  --cedar:#6B5D4E;         /* secondary text on paper */
  --cedar-deep:#544737;    /* secondary text on clay or citron */

  /* ---- system signals · product only, never marketing ---- */
  --ochre:#C08A2E;         /* waiting on someone */
  --rust:#B4472A;          /* stopped, expired, failed */
  --citron-wash:#EDF0CE;
  --ochre-wash:#F7EEDC;
  --rust-wash:#F6E7E1;

  /* ---- type ---- */
  --display:"Bricolage Grotesque", sans-serif;   /* headings, numbers, wordmark */
  --body:"Hanken Grotesk", sans-serif;           /* everything readable */
  --mono:"Space Mono", monospace;                /* labels, statuses, data */

  /* ---- shape ---- */
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* ---- depth ---- */
  --lift:0 3px 0 var(--soot);            /* buttons */
  --lift-card:0 7px 0 var(--clay-deep);  /* cards that sit on the page */
}

/* ============================================================
   RULES — these are not suggestions

   1. NO DARK BACKGROUNDS. Depth is paper → paper-2 → clay.
      Soot is ink. If you want loud, go citron, not black.

   2. Citron never works as text on a light ground (~1.6:1).
      On paper or clay, the Y mark and any text render in soot.
      Citron is for fills: primary buttons, brand tiles, washes.

   3. ONE citron element per screen — the thing that moves you
      forward. Two primaries means neither is primary.

   4. Inputs are 16px minimum so iOS never zooms on focus.

   5. Tap targets are 44px minimum. Cleaners use this one-handed
      on a phone in a stairwell.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--soot);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--citron);color:var(--soot)}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.05;margin:0}
h1{font-weight:800;font-size:clamp(32px,5vw,54px);letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(26px,3.6vw,40px)}
h3{font-weight:600;font-size:21px}
h4{font-weight:600;font-size:19px}
p{margin:0;max-width:66ch}

.label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cedar);
}