/* ==========================================================================
   tokens.css — the design brief, compiled. Yard Master Services, Logan UT:
   clean-clinical / clay / full-bleed-immersive. Every value is transcribed from
   the approved brief (§2.6, §2.8, §3.3, §5, §6.7, §8); nothing was chosen at
   build time. THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour (brief §3.3) ---------------------------------------------- */

  --scheme: light;                    /* one deliberate mode, per design-rules §6 */

  /* ground + ink */
  --color-bg:               #FCFBF8;  /* high white ground — hsl(45, 40%, 98%) */
  --color-surface:          #EFEBE4;  /* plate tint, quiet blocks — hsl(38, 24%, 92%) */
  --color-ink:              #2A2320;  /* soil ink — hsl(18, 14%, 15%) */
  --color-ink-muted:        #5F5450;  /* secondary text — hsl(16, 9%, 34%) */

  /* accent — CLAY. A TEXT-WEIGHT COLOUR, not a fill-only accent. */
  --color-accent:           #9E4224;  /* hsl(15, 63%, 38%) · 6.23:1 on --color-bg */
  --color-accent-ink:       #FCFBF8;  /* type ON a clay fill */

  /* the one deep band (§IV) */
  --color-band:             #3B2A22;  /* soil — hsl(19, 27%, 18%). FLAT FILL. No gradient. */
  --color-band-ink:         #FCFBF8;
  --color-band-ink-muted:   #D9CCC4;
  --color-accent-onband:    #E08A62;  /* the clay's on-dark sibling. See R1. */

  /* hero atmosphere (design-rules §0 — never a flat ground). Paints below every
     plate and above the field (R3); no text ever sits on it, so §6's gradient
     clause has nothing to measure. Brief §4.3. */
  --color-halo-cool:        #FDFDFC;
  --color-halo-clay:        #F3E2D9;

  /* lines, focus, selection */
  --color-rule:             #D8D2CA;  /* 1.45:1 — DECORATIVE SEPARATOR ONLY. See R5. */
  --color-border:           #D8D2CA;  /* house-required alias of --color-rule, consumed by base.css */
  --color-focus:            #9E4224;
  --color-focus-on-band:    #E08A62;  /* COLOUR ONLY — geometry is base.css's. See R6. */
  --color-selection-bg:     #9E4224;
  --color-selection-ink:    #FCFBF8;

  /* --- Typography (brief §2.6) ------------------------------------------- */

  --font-display:     'Schibsted Grotesk 700', 'Schibsted Grotesk Fallback',     'Helvetica Neue', Arial, sans-serif;
  --font-display-mid: 'Schibsted Grotesk 500', 'Schibsted Grotesk Mid Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Source Sans 3',         'Source Sans 3 Fallback',         'Segoe UI', Arial, sans-serif;
  --font-body-strong: 'Source Sans 3 Strong',  'Source Sans 3 Strong Fallback',  'Segoe UI', Arial, sans-serif;

  --font-weight-display: 700;      --font-weight-display-mid: 500;
  --font-weight-body:    400;      --font-weight-body-strong: 600;

  /* --- Fluid scale (brief §2.8) ------------------------------------------ */

  --text-display: clamp(2.375rem, 1.95rem + 1.8vw, 4rem);
  --text-h2:      clamp(1.625rem, 1.45rem + 0.74vw, 2.5rem);
  --text-h3:      clamp(1.1875rem, 1.13rem + 0.24vw, 1.5rem);
  --text-lead:    clamp(1.0625rem, 1.01rem + 0.24vw, 1.375rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.6875rem;

  --leading-tight: 1.26;  /* h1, h2, the band's display line */
  --leading-snug:  1.30;  /* h3, service names, process step titles */
  --leading-body:  1.60;  /* lead, body, small, eyebrow */
  --leading-flat:  1.50;  /* control labels — the button's line box */

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-caps: 0.18em;

  /* --- Space — the house scale (house-tech-spec §3) ---------------------- */

  --space-3xs: 0.25rem;  --space-2xs: 0.5rem;   --space-xs: 0.75rem;
  --space-sm:  1rem;     --space-md:  1.5rem;   --space-lg: 2.5rem;
  --space-xl:  4rem;     --space-2xl: 6rem;     --space-3xl: 9rem;

  /* design-rules §7.1's ONE inter-section token. TWO call sites, no others:
     .section's padding-block, and .hero's padding-block-END. Brief §5.6. */
  --section-gap: var(--space-2xl);    /* 96px at EVERY width — fixed rem */

  /* --- Layout (brief §3.3, §5) ------------------------------------------- */

  --layout-container:  72rem;              /* 1152px cap */
  --layout-measure:    60ch;
  --layout-gutter:     clamp(1.25rem, 6vw, 3rem);
  --layout-tap-min:    44px;
  --layout-header-height: calc(var(--layout-tap-min) + var(--space-xs));  /* 56px, a MIN */
  --layout-plate:      min(38rem, 48vw);   /* the plate's inline size at >=48rem. §5.4.3 */
  --layout-digit-col:  1.5rem;             /* process step digit column — a COLUMN WIDTH,
                                              deliberately off the --space-* scale */

  /* the field (brief §5.4.3) — fixed per breakpoint, no clamp. The two steps
     are tokens so site.css's media queries can re-point --field-height without
     carrying a size literal (house-tech-spec §3). */
  --field-height:    480px;           /* below 48rem */
  --field-height-md: 640px;           /* >=48rem */
  --field-height-lg: 720px;           /* >=64rem */

  /* the bead — this site's signature mark (brief §6.7, §8) */
  --bead-size:   10px;                /* section-head marker. FIXED at every width. */
  --bead-offset: 3.8px;               /* (17.60 line box - 10) / 2. NOT an em. §2.8. */
  --bead-floor:   4px;                /* hard minimum for the hero's dew marks */

  /* --- Radius + border. NO PILL TOKEN EXISTS. --------------------------- */

  --radius-none:  0;
  --radius-sm:    0;                  /* house-required name, consumed by base.css. No
                                         rounded corner on this site; --radius-round is
                                         the only curve, and it has two call sites. */
  --radius-round: 50%;                /* the bead and the dew marks, and nothing else */

  --border-hairline: 1px;  --border-thick: 2px;  --border-style: solid;

  /* --- Motion (brief §8) -------------------------------------------------- */

  --duration-fast:   140ms;
  --duration-reveal: 380ms;
  /* base.css's reveal system and its kill switch consume these two house names;
     this site has one reveal duration, so both resolve to it. base.css
     re-declares them at :root under prefers-reduced-motion and wins on source
     order — which is how every transition collapses without `!important` (R8). */
  --duration-base:   var(--duration-reveal);
  --duration-slow:   var(--duration-reveal);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 0.5rem;             /* 8px */
  --reveal-stagger: 70ms;

  --loop-catch-a: 11s;  --loop-catch-b: 14s;  --loop-catch-c: 19s;  --loop-bead: 13s;

  /* brief §8's reduced-motion frame, value for value. */
  --rest-catch-a: 0.90;  --rest-catch-b: 0.45;  --rest-catch-c: 0.62;
  --rest-bead-transform: translateY(0) scale(1.15);
  --rest-bead-opacity: 0.75;
  --bead-fall-1: 26px;  --bead-fall-2: 64px;

  /* --- Z layers (brief §4.5 R3) ------------------------------------------ */

  --z-field: 0;  --z-atmosphere: 1;  --z-plate: 2;  --z-header: 100;  --z-skip-link: 300;
}

/* @font-face — self-hosted woff2 only, subset to house-tech-spec §8's declared
   safe range and declaring that same range. No CDN, no fonts.googleapis.com.
   FOUR STATIC INSTANCES: none carries a variation axis, so
   `font-variation-settings` cannot appear anywhere on this site (brief R7).
   The four metrics-matched fallbacks are `local()` faces, download nothing, and
   declare the weight they stand in for so nothing is synthetically bolded.
   Their size-adjust / ascent / descent sets are MEASUREMENTS against an Arial
   donor, tuned in-browser to Lighthouse CLS 0.000; the table is in README. */

@font-face {
  font-family: 'Schibsted Grotesk 700';
  src: url('../assets/fonts/schibsted-grotesk-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Schibsted Grotesk 500';
  src: url('../assets/fonts/schibsted-grotesk-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../assets/fonts/source-sans-3-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Source Sans 3 Strong';
  src: url('../assets/fonts/source-sans-3-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

/* Metrics-matched fallbacks — one per instance, zero bytes (brief §2.4). */

@font-face {
  font-family: 'Schibsted Grotesk Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  font-style: normal;
  size-adjust: 109.8%;
  ascent-override: 88.9%;
  descent-override: 23.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Schibsted Grotesk Mid Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 500;
  font-style: normal;
  size-adjust: 103.6%;
  ascent-override: 94.3%;
  descent-override: 25.0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  font-style: normal;
  size-adjust: 92.7%;
  ascent-override: 110.3%;
  descent-override: 43.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 Strong Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 600;
  font-style: normal;
  size-adjust: 95.6%;
  ascent-override: 107.0%;
  descent-override: 41.9%;
  line-gap-override: 0%;
}