/* ============================================================
   cwarner.com — design tokens (single source of truth)
   Archetype F — Boxed spec-sheet grid, warmed to a "field-dossier / blueprint".
   Direction rationale (each traces to dossier.md):
   - Deep basalt "blueprint" ground + warm bone paper because the pitch is
     "a life engineered like a well-drawn plan" — a ruled datasheet of a
     systems-minded explorer, not an industrial cold spec.
   - Terracotta = trail-blaze accent, carried forward from his existing brand
     (respect the prospect's brand); pine/sage = nature secondary; dusk-blue =
     sky/data, used sparingly. Warm palette so the grid reads adventurous.
   - Space Grotesk (technical grotesque) + JetBrains Mono (field-notebook
     coordinate/spec labels) because "explorer at heart, builder by nature".
   - Topographic-line motif (not photos) carries imagery — no stock passed off
     as his travel work (Iron Law).
   Every value the build uses comes from a token here.
   ============================================================ */

/* Self-hosted variable faces — preloaded + local → font-display: optional
   so a late swap never reflows headings (CLS trap). LCP hero text never
   starts at opacity:0 (see styles.css). */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/spacegrotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/jetbrainsmono-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: optional;
}

:root {
  color-scheme: dark light;

  /* — Type families — */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* — Palette: the paper (light default) — */
  --paper:      #f4efe6;  /* warm bone field-sheet */
  --paper-2:    #ece4d6;  /* recessed cell */
  --ink:        #1b1815;  /* basalt text on paper */
  --ink-soft:   #4f463c;  /* secondary text */
  --ink-faint:  #6b5f51;  /* captions / coordinates — darkened for AA on paper */
  --line:       #d3c7b3;  /* hairline rule between cells */
  --line-strong:#b7a993;  /* frame / heavy rule */

  /* — Palette: brand accents — */
  --blaze:      #a84e28;  /* terracotta trail-blaze (carried from his brand); AA on paper */
  --blaze-deep: #9a4623;
  --blaze-soft: #e2c4b3;  /* tint on paper */
  --pine:       #43705b;  /* sage/pine nature secondary */
  --pine-soft:  #cfe0d3;
  --dusk:       #3f6072;  /* sky/data, sparing */

  /* — Fixed "blueprint band" (theme-independent — used for inverted cells) — */
  --band:        #17140f; /* deep basalt, FIXED (never theme-shifts) */
  --band-2:      #221d16;
  --on-band:     #efe7d7; /* text on band — fixed bright, passes AA on --band */
  --on-band-soft:#c3b7a2;
  --blaze-on-band:#e08a5f; /* brightened terracotta pinned for AA on fixed dark band */
  --pine-on-band: #7fb195; /* brightened pine pinned for AA on fixed dark band */
  --line-on-band: #3a332880; /* hairline over band */

  /* — Fluid type scale (technical, tight) — */
  --step--2: clamp(0.62rem, 0.60rem + 0.10vw, 0.68rem); /* micro coordinates */
  --step--1: clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.24vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.42vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.8vw, 2.05rem);
  --step-3:  clamp(2.0rem, 1.7rem + 1.5vw, 3.0rem);
  --step-4:  clamp(2.7rem, 2.1rem + 3.0vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2.4rem + 5.2vw, 7.2rem);   /* the big field-sheet numerals / display */

  --label:   0.68rem;   /* uppercase mono labels */
  --tracking-label: 0.16em;

  /* — Spacing scale — */
  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.4rem;
  --space-6: 3.6rem;
  --space-7: clamp(4rem, 3rem + 3.5vw, 6rem);

  /* — Structure — */
  --radius: 0px;         /* spec-sheet: square corners, ruled not rounded */
  --radius-sm: 2px;
  --rule: 1px;           /* hairline */
  --rule-frame: 1.5px;   /* outer frame */
  --maxw: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.4rem);

  --shadow-cell: 0 1px 0 rgba(27,24,21,.04);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blaze);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Dark palette — shared declarations applied for BOTH the system preference
   (unless a manual light override is set) AND the manual dark toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14110d;  /* dark field-sheet */
    --paper-2:    #1c1813;
    --ink:        #efe7d7;
    --ink-soft:   #c0b4a0;
    --ink-faint:  #a3937d;  /* AA on dark paper */
    --line:       #322b22;
    --line-strong:#463d30;
    --blaze:      #e08a5f;  /* brightened for dark paper */
    --blaze-deep: #c96f43;
    --blaze-soft: #3a271c;
    --pine:       #7fb195;
    --pine-soft:  #223028;
    --dusk:       #7ea2b6;
    --shadow-cell: 0 1px 0 rgba(0,0,0,.25);
    --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blaze);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:      #14110d;
  --paper-2:    #1c1813;
  --ink:        #efe7d7;
  --ink-soft:   #c0b4a0;
  --ink-faint:  #a3937d;
  --line:       #322b22;
  --line-strong:#463d30;
  --blaze:      #e08a5f;
  --blaze-deep: #c96f43;
  --blaze-soft: #3a271c;
  --pine:       #7fb195;
  --pine-soft:  #223028;
  --dusk:       #7ea2b6;
  --shadow-cell: 0 1px 0 rgba(0,0,0,.25);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--blaze);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }