/* ════════════════════════════════════════════════════════════════════
   Fieldcraft (fieldcraft) — tokens.css
   Generated from design/tokens.json — the single source of truth.
   Extracted from the user-approved comps:
     design/comp/home.html · design/comp/services.html (2026-07-20)

   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.
   Do not hardcode any value that exists here.
   ════════════════════════════════════════════════════════════════════ */

: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-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(4rem, 10vh, 7rem);

  /* ── 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;

  /* ── 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-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-header:  50;
  --z-skip:    99;

  /* ── opacity ─────────────────────────────────────────────────── */
  --opacity-blink-low:      0.25;
  --opacity-footer-link:    0.75;
  --opacity-footer-address: 0.85;

  /* ── 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);
}