/* Hallmark · macrostructure: Narrative Workflow · H4 stat-led hero knobs: number=phone tabular display, qualifier=stacked-above+below, secondary=none
 * theme: custom · vibe: "workwear label, rodeo poster, navy badge, bone paper" · paper: oklch(95% 0.012 85) · accent: oklch(52% 0.185 27)
 * display: Barlow Condensed 700 · body: IBM Plex Sans · outlier: Saira Stencil One (stencil numerals only — dumpsters wear stenciled numbers)
 * axes: light / display-condensed / warm-red · differs from Triple R Dump (dark-navy / display-condensed / warm-orange) on paper band + accent hue
 * nav: N7 brutal slab (3px rule, tracked caps, phone slab right) · footer: Ft5 statement ("STAY DEDICATED.") · CTA: C4 sticky bottom bar (mobile, after fold)
 * studied: no · context: inferred (autonomous build) — audience: Greeley/Weld County homeowners + contractors · use: call, text, or book a bin · tone: utilitarian-americana
 * anchor: Fernando's badge logo (navy circle, condensed caps, STAY DEDICATED banner) — navy runs as ink/bands, never as page paper, so this build inverts the prior dark build
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5
 */
:root {
  /* paper side — bone / manila, warm print stock */
  --color-paper:      oklch(95% 0.012 85);   /* bone */
  --color-paper-2:    oklch(92% 0.016 85);   /* aged bone — alternating sections, form fields */
  --color-paper-3:    oklch(88% 0.020 85);   /* kraft edge — pressed states, table stripes */
  --color-rule:       oklch(80% 0.020 85);   /* khaki hairline on paper */
  --color-rule-2:     oklch(86% 0.016 85);   /* fainter hairline */
  --color-muted:      oklch(45% 0.025 250);  /* navy-grey secondary text on paper */

  /* ink side — badge navy */
  --color-ink:        oklch(26% 0.038 252);  /* navy ink on bone */
  --color-ink-deep:   oklch(21% 0.036 252);  /* headline navy */

  /* navy bands (nav, footer, quote) — the badge, inverted */
  --color-band:       oklch(24% 0.036 252);  /* band surface */
  --color-band-2:     oklch(29% 0.036 252);  /* band elevation (+5% L) */
  --color-band-ink:   oklch(94% 0.012 85);   /* bone text on navy */
  --color-band-muted: oklch(74% 0.018 250);  /* secondary text on navy */
  --color-band-rule:  oklch(36% 0.034 252);  /* hairline on navy */

  /* accent — flag red. A signal, not a fill: stencil numerals, active marks, underlines, one badge line */
  --color-accent:     oklch(52% 0.185 27);
  --color-accent-deep:oklch(46% 0.170 27);   /* red on paper-3 / hover */
  --color-focus:      oklch(55% 0.210 27);   /* :focus-visible ring only */

  /* success (form confirmation only) */
  --color-ok:         oklch(46% 0.090 150);

  /* type — 2+1: condensed display, plex body, stencil outlier (numerals only, ≤2 roles) */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-stencil: "Saira Stencil One", "Barlow Condensed", sans-serif;

  /* scale — 1.25 major third from 16px, display clamped */
  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-display-s: clamp(2rem, 3.4vw + 1rem, 3.4rem);
  --text-display:   clamp(2.6rem, 5vw + 1rem, 5.25rem);
  --text-phone:     clamp(2.6rem, 7.5vw + 0.5rem, 6rem); /* single-line numerals — allowed past display cap */

  /* space — 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  /* motion — three named easings, short durations, cut before adding */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   140ms;
  --dur-med:     240ms;

  /* edges — print-shop square. Radius is a decision: near-zero everywhere */
  --radius-btn:  2px;
  --radius-card: 3px;
  --rule-hair:   1px solid var(--color-rule);
  --rule-heavy:  3px solid var(--color-ink-deep);

  /* layout */
  --page-max:    72rem;
  --page-gutter: clamp(1rem, 4.5vw, 3rem);

  /* z scale — named, no 9999 */
  --z-raised: 1;
  --z-nav:    10;
  --z-bar:    20;
}