/*!
 * Fieldcraft — HTML template tokens.scss
 * Compiles to dist/css/tokens.css
 *
 * A thin entry point around settings/_settings.tokens.scss so tokens
 * compile to their own file, matching every page's <link> pair (tokens.css
 * loaded before main.css). Kept separate from main.scss so tokens.css stays
 * comparable byte-for-byte against every other deliverable's tokens.css
 * copy (scripts/check-tokens-sync.sh) without main.css's component rules
 * mixed in.
 */
/* ==========================================================================
   #TOKENS
   ==========================================================================
   Fieldcraft design tokens, generated from design/tokens.json — the single
   source of truth (CLAUDE.md golden rule 3). Extracted from the
   user-approved comps: design/comp/home.html · design/comp/services.html
   (2026-07-20). Do not edit values here — regenerate from tokens.json.

   The short names (--iron, --bone, --amber, --fd, --gutter …) are the
   EXACT variable names the comps use — the HTML stage drops this file in
   and the comp CSS resolves unchanged. The longer --color-* / --text-* /
   --space-* aliases are the systemized layer every new component uses.

   These stay CSS custom properties (not Sass variables) so the compiled
   output is byte-compatible with every other deliverable's tokens.css
   (WordPress theme, presentation page, framework ports) that this file's
   values are diffed against — see scripts/check-tokens-sync.sh.

   Lives under settings/ (not base/) to match purchased/html/neat's own
   src/scss/settings/ naming convention for its variables layer — Fieldcraft
   keeps that value in custom properties rather than converting to Sass
   $variables, per CLAUDE.md golden rule 3 (architecture studied, no code
   copied, see CLAUDE.md golden rule 1). */
:root {
  /* ── color · ground ──────────────────────────────────────────── */
  --iron: #0C0E10;
  --iron-2: #14171C;
  --iron-3: #1B1F25; /* reserved raised surface (declared in comps) */
  --paper: #EFE9DF;
  --paper-2: #E6DFD2; /* reserved paper surface (declared in comps)  */
  /* ── color · text ────────────────────────────────────────────── */
  --bone: #EDEAE3;
  --mute: #9BA1A9;
  --ink: #16181C;
  --mute-p: #5C6058;
  --bone-soft: rgba(237, 234, 227, 0.82); /* ledes, liners, marquee   */
  --bone-dim: rgba(237, 234, 227, 0.66); /* hero meta                */
  --color-placeholder: rgba(155, 161, 169, 0.55); /* placeholder only — label always visible above */
  /* ── color · accent (the ONE hot accent) ─────────────────────── */
  --amber: #FFAD0A;
  --amber-hot: #FFC240;
  --amber-outline: rgba(255, 173, 10, 0.4); /* cost-chip border        */
  /* ── color · lines & scrims ──────────────────────────────────── */
  --hairline: rgba(237, 234, 227, 0.14);
  --hairline-p: rgba(22, 24, 28, 0.16);
  --check-stroke: rgba(22, 24, 28, 0.2);
  --scrim-header: rgba(12, 14, 16, 0.86);
  --scrim-stamp: rgba(12, 14, 16, 0.72);
  --scrim-marquee: rgba(12, 14, 16, 0.6);
  --shade-side: linear-gradient(250deg, rgba(12,14,16,.5) 0%, rgba(12,14,16,0) 38%);
  --shade-vert: linear-gradient(180deg, rgba(12,14,16,.42) 0%, rgba(12,14,16,.06) 42%, rgba(12,14,16,.9) 100%);
  /* ── color · semantic aliases ────────────────────────────────── */
  --color-background: var(--iron);
  --color-surface: var(--iron-2);
  --color-surface-raised: var(--iron-3);
  --color-background-alt: var(--paper);
  --color-surface-alt: var(--paper-2);
  --color-text: var(--bone);
  --color-muted: var(--mute);
  --color-text-alt: var(--ink);
  --color-muted-alt: var(--mute-p);
  --color-border: var(--hairline);
  --color-border-alt: var(--hairline-p);
  --color-accent: var(--amber);
  --color-accent-hover: var(--amber-hot);
  --color-error: var(--amber); /* one signal color by design */
  --color-success: var(--amber);
  /* ── font ────────────────────────────────────────────────────── */
  --fd: "Big Shoulders", sans-serif; /* display — OFL */
  --fb: "IBM Plex Sans", sans-serif; /* body — OFL    */
  --fm: "IBM Plex Mono", monospace; /* mono — OFL    */
  --font-heading: var(--fd);
  --font-body: var(--fb);
  --font-mono: var(--fm);
  --weight-heading-bold: 700;
  --weight-heading-black: 800;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-mono: 400;
  --weight-mono-medium: 500;
  /* ── type scale · display (Big Shoulders, uppercase) ─────────── */
  --text-display-hero: clamp(3.5rem, 12.5vw, 13rem);
  --text-display-page: clamp(3rem, 10vw, 10rem);
  --text-display-band: clamp(3rem, 10vw, 9rem);
  --text-display-stat: clamp(3.5rem, 9vw, 8.5rem);
  --text-display-section: clamp(2.75rem, 7.5vw, 6.5rem);
  --text-display-row-lg: clamp(2.5rem, 6vw, 5.5rem);
  --text-display-row: clamp(2rem, 5.5vw, 4.5rem);
  --text-display-statement: clamp(1.75rem, 4.2vw, 3.75rem);
  --text-display-order: clamp(2rem, 4vw, 3.5rem);
  --text-display-step: clamp(1.75rem, 3.5vw, 3rem);
  --text-heading-crew: 1.75rem;
  --text-heading-logo: 1.625rem;
  --text-heading-marquee: 1.5rem;
  /* ── type scale · body (IBM Plex Sans) ───────────────────────── */
  --text-title-note: clamp(1.125rem, 2vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --text-body: 1.0625rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.9375rem;
  --text-small: 0.875rem;
  /* ── type scale · mono (IBM Plex Mono, uppercase, letterspaced) ─ */
  --text-mono-2xl: 1.25rem;
  --text-mono-fluid: clamp(0.8rem, 1.6vw, 1.05rem);
  --text-mono-xl: 0.85rem;
  --text-mono-lg: 0.8rem;
  --text-mono-md: 0.78rem;
  --text-mono-sm: 0.75rem;
  --text-mono-xs: 0.72rem;
  --text-mono-2xs: 0.7rem;
  --text-mono-stamp: clamp(0.55rem, 1.7vw, 0.72rem);
  --text-glyph-sm: 0.65rem;
  /* ── tracking ────────────────────────────────────────────────── */
  --tracking-display: 0.01em;
  --tracking-wordmark: 0.02em;
  --tracking-phone-hover: 0.05em;
  --tracking-pill: 0.1em;
  --tracking-mono: 0.14em;
  --tracking-label: 0.16em;
  --tracking-kicker: 0.18em;
  --tracking-wide: 0.2em;
  --tracking-towns: 0.22em;
  /* ── superscript (ledger stat unit sup, e.g. 8.5K) ───────────── */
  --scale-sup: 0.35em;
  --offset-sup: 0.9em;
  /* ── leading ─────────────────────────────────────────────────── */
  --leading-display: 0.92;
  --leading-tight: 1;
  --leading-statement: 1.1;
  --leading-note: 1.3;
  --leading-quote: 1.55;
  --leading-body: 1.6;
  --leading-mono-list: 2;
  --leading-towns: 2.2;
  --leading-footer-list: 2.6;
  /* ── space · fixed (4px base) ────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-28: 7rem;
  /* ── space · fluid (on-grid endpoints) ───────────────────────── */
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --section-y: clamp(4rem, 10vw, 8rem);
  --band-y: clamp(5rem, 12vw, 9rem);
  --footer-y: clamp(4rem, 8vw, 6rem);
  --head-mb: clamp(3rem, 6vw, 5rem);
  --row-y: clamp(3.5rem, 7vw, 6rem);
  --gap-2xl: clamp(3rem, 7vw, 7rem);
  --gap-xl: clamp(3rem, 6vw, 6rem);
  --gap-lg: clamp(2rem, 4vw, 4rem);
  --gap-md: clamp(1.5rem, 3vw, 3rem);
  --nav-gap: clamp(1rem, 2.5vw, 2.5rem);
  --hero-meta-top: clamp(2.25rem, 5.5vh, 3rem);
  /* ── radius / rules / blur ───────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 2rem;
  --radius-full: 50%;
  --rule-1: 1px;
  --rule-2: 2px;
  --rule-4: 4px;
  --shadow-none: none; /* no box-shadows in this system — hairlines + scrims only */
  --blur-header: 10px;
  --blur-marquee: 8px;
  --blur-stamp: 4px;
  /* ── fixed sizes ─────────────────────────────────────────────── */
  --size-dot: 0.625rem;
  --size-kicker-square: 0.75rem;
  --size-row-no-col: 7rem;
  --size-row-no-col-sm: 4rem;
  --size-textarea-min: 6rem;
  --size-tap-min: 2.75rem; /* 44px min touch target (WCAG 2.5.5/5.5.8) */
  --focus-outline: 2px;
  --focus-offset: 3px;
  --size-hero-min-h: 78svh; /* .phero min-height */
  --size-scrollbar-h: 6px; /* thin custom-scrollbar height */
  --em-pad-tight: 0.1em; /* highlighted-em / tag hugging padding */
  --botbar-link-em: 1em; /* botbar tap-target vertical-centering offset base */
  /* ── aspect ratios ───────────────────────────────────────────── */
  --aspect-frame: 4 / 5;
  --aspect-frame-sm: 4 / 3;
  --aspect-band: 21 / 9;
  /* ── containers & measures ───────────────────────────────────── */
  --container-content: 1440px;
  --container-statement: 1200px;
  --measure-heading: 16ch;
  --measure-stat: 14rem;
  --measure-stamp: 18rem;
  --measure-brand: 30ch;
  --measure-lede: 38ch;
  --measure-column: 44ch;
  --measure-reading: 52ch;
  /* ── breakpoints (reference only — media queries can't read vars) ─
     --bp-sm: 560px;  --bp-md: 860px;  --bp-lg: 1100px;              */
  /* ── z-index ─────────────────────────────────────────────────── */
  --z-base: 1;
  --z-hero-fg: 2;
  --z-hero-meta: 3;
  --z-header: 50;
  --z-skip: 99;
  /* ── opacity ─────────────────────────────────────────────────── */
  --opacity-blink-low: 0.25;
  --opacity-footer-link: 0.75;
  --opacity-footer-address: 0.85;
  --opacity-map-overlay: 0.7; /* map-frame photo overlay */
  --opacity-overlay-fade: 0.9; /* presentation page preview-bar gradient */
  /* ── motion (register-legal inventory only) ──────────────────── */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.25s;
  --duration-slow: 0.3s;
  --duration-slower: 0.35s;
  --duration-lazy: 0.4s;
  --duration-reveal: 0.9s;
  --duration-zoom: 1s;
  --duration-hero: 1.1s;
  --duration-countup: 1500ms;
  --hero-delay-1: 0.12s;
  --hero-delay-2: 0.26s;
  --hero-load-delay: 150ms;
  --blink: 2.4s;
  --blink-dot: 1.8s;
  --marquee-loop: 30s;
  --reveal-offset: 40px;
  --hero-line-offset: 112%;
  --img-zoom-rest: scale(1.07);
  --img-zoom-hover: scale(1.005);
  --hover-lift: translateY(-2px);
}