/* ==========================================================================
   Spryt — design tokens
   Every value below traces to Brand Guidelines v1.0. Section refs in comments.
   ========================================================================== */

/* --- 3.1 / 3.3  Typeface -------------------------------------------------
   Brand face is Early Sans (Adobe Fonts). Source Sans 3 is the guidelines'
   sanctioned alternate and is what ships here, so the site renders correctly
   without an Adobe licence. Swap the stack below when Early Sans is licensed. */
@font-face{
  font-family:"Source Sans 3";
  src:url("../SourceSans3-Variable.ttf") format("truetype-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  --font-brand:"Early Sans Variable","Source Sans 3",system-ui,sans-serif;

  /* --- 4.1  Core palette ------------------------------------------------ */
  --pathway-green:#132C2C;
  --spryt-sky:#00D5FF;
  --asa-sunrise:#FF5F1F;
  --cloud:#D0EBF3;
  --white:#FFFFFF;

  /* --- 4.2  Tints.  Pathway Green and Cloud may be tinted.
         Spryt Sky and Asa Sunrise must ALWAYS be 100% — no tint tokens
         are defined for them, deliberately, so none can be used. -------- */
  --green-90:#2B4141; --green-70:#5A6B6B; --green-50:#899696;
  --green-30:#B8C0C0; --green-20:#D0D5D5; --green-10:#E7EAEA;
  --cloud-90:#D5EDF4; --cloud-70:#DEF1F7; --cloud-50:#E8F5F9;
  --cloud-30:#F1F9FB; --cloud-10:#FAFDFE;

  /* Asa message surface. Sampled from the Asa demo thread on p52 — a warm
     peach carrying Pathway Green text. Named explicitly rather than derived
     from Asa Sunrise, because 4.2 forbids tinting Asa Sunrise; this is its
     own surface colour from the Brand at Work artwork, not a tint anyone
     mixed. See BRAND-COMPLIANCE.md. */
  --asa-message:#FEDFD2;

  /* --- 6.6  Radii.  Proportional: 5–15% of the shortest side.
         One radius per scale, held constant across a layout. ------------ */
  /* Measured off p46: the white hero block is 360x244 with an ~11px
     radius — 4.5% of its shortest side, i.e. the bottom of 6.6's 5-15%
     range. Radii are therefore stepped by block scale, so a small block
     never ends up more rounded, proportionally, than a large one. */
  --r-block:20px;   /* large architectural blocks (~330px+) */
  --r-card:14px;    /* nested cards + image blocks (~220px) */
  --r-chip:8px;     /* chips, bubbles, small blocks (~100px) */
  --r-fillet:20px;  /* connector inner corner — SAME radius as the convex
                       corners, as measured off guidelines p38 */
  --r-pill:999px;

  /* --- 3.2  Hierarchy.  Sentence case, tracking −10 optical (−0.01em),
         leading ~108% on display sizes, ~117–120% on supporting copy. --- */
  --track:-0.01em;
  --t-display:clamp(2.6rem,5.4vw,4.5rem);
  --t-h1:clamp(2.1rem,4vw,3.25rem);
  --t-h2:clamp(1.6rem,2.6vw,2.35rem);
  --t-h3:clamp(1.2rem,1.7vw,1.5rem);
  --t-stat:clamp(2.8rem,6vw,5rem);
  --t-body:clamp(1rem,1.05vw,1.125rem);
  --t-small:0.9375rem;
  --t-label:0.8125rem;

  /* --- Layout ----------------------------------------------------------- */
  --measure:64ch;
  /* The p46 mockup runs its content to roughly 94% of the viewport, so the
     column is wide and the gutter slim. 1240px with a 48px gutter left the
     hero looking boxed-in on a laptop. */
  --gutter:clamp(20px,3vw,52px);
  --max:1560px;
  --sp-section:clamp(72px,9vw,132px);
}

/* --- 4.3  Colour usage.
   These are the ONLY combinations the guidelines allow. Each surface class
   sets both its background and the text colours legal on it, so an illegal
   pairing cannot be produced by combining classes. ------------------------ */
.on-green   { background:var(--pathway-green); color:var(--white); }
.on-green   .headline{ color:var(--spryt-sky); }   /* sky/sunrise/cloud/white */
.on-white   { background:var(--white);         color:var(--pathway-green); }
.on-cloud   { background:var(--cloud);         color:var(--pathway-green); }
.on-sky     { background:var(--spryt-sky);     color:var(--pathway-green); }
.on-sunrise { background:var(--asa-sunrise);   color:var(--white); }