/* cut+paste — Design Tokens */

/*
   Breakpoints
   ─────────────────────────────────
   > 1024px  Desktop   Full composition, calendar month grid
   ≤ 1024px  Tablet    Tighter grid, type steps down
   ≤ 768px   Mobile    Calendar flips to agenda list, single column
*/

:root {
  /* ---------- Bauhaus primaries ---------- */
  --red: #e1352b;
  --blue: #1a48c4;
  --yellow: #f5c518;
  --green: #2e9e5b;

  /* ---------- Brand accent ----------
     Orange ties the site to the kits (Fiskars/Elmer's).
     Reserved for the logo "+", buttons, and links.
     Never used as a city color. */
  --orange: #f26c21;

  /* ---------- Surface ---------- */
  --ink: #111111;
  --paper: #f6f4ee;
  --white: #ffffff;
  --concrete: #c9c6be;
  --ink-60: rgba(17, 17, 17, 0.6);
  --ink-35: rgba(17, 17, 17, 0.35);
  --ink-12: rgba(17, 17, 17, 0.12);

  /* One step lighter than --paper. The newsletter panel is an offcut laid on
     top of the page, so it reads as a separate sheet without a border. */
  --panel: #fdfcf7;

  /* ---------- City codes ----------
     Single source of truth for chapter color. js/cities.js mirrors these
     keys; adding a 5th chapter = one entry here + one in cities.js.
     Reserve: purple #6B3FA0, orange is off-limits (brand accent). */
  --city-la: var(--red);
  --city-phx: var(--yellow);
  --city-den: var(--blue);
  --city-pwm: var(--green);

  /* Ink color to sit ON each city color (yellow needs dark ink) */
  --on-city-la: var(--paper);
  --on-city-phx: var(--ink);
  --on-city-den: var(--paper);
  --on-city-pwm: var(--paper);

  /* ---------- Type ---------- */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;

  /* Enormous at the top, uncomfortably small at the bottom.
     The hero is the logo file now, not set type, so --step-mega no longer
     has to be measured against the wordmark and --display is free to change
     wholesale. --step-mega is unused on the site; the styleguide still shows
     it as a step. */
  --step-mega: clamp(2.5rem, 11.8vw, 11.75rem);
  --step-xl: clamp(2.25rem, 8.5vw, 6.5rem);
  --step-l: clamp(1.6rem, 4.2vw, 3rem);
  --step-m: clamp(1.05rem, 1.5vw, 1.35rem);
  --step-body: clamp(0.9375rem, 1.05vw, 1.0625rem);
  --step-micro: 0.625rem;
  --step-nano: 0.5625rem;

  /* Controls sit a step above the micro register they used to borrow, so the
     interactive layer doesn't read as fine print. */
  --step-control: 0.75rem;

  --track-mega: -0.045em;
  --track-micro: 0.18em;

  /* ---------- Wonk ----------
     Nothing sits flat. Escalating tiers of off-axis. */
  --tilt-hair: 0.5deg;
  --tilt-soft: 1.25deg;
  --tilt-hard: -3deg;

  /* ---------- Structure ---------- */
  --rule: 2px;
  --rule-hair: 1px;
  --gutter: clamp(1.125rem, 4vw, 3.5rem);
  --maxw: 1560px;

  /* How far the hero logo overshoots the viewport before .hero crops it. */
  --logo-bleed: clamp(0.75rem, 2.5vw, 2.5rem);

  /* Reading measure for text-only pages. Not a page width -- .sheet adds the
     gutter on top of this. */
  --measure: 64ch;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tilt-hair: 0deg;
    --tilt-soft: 0deg;
    --tilt-hard: 0deg;
  }
}