/* ==========================================================================
   tokens.css — the design brief, compiled.

   Kerr Country Pump Service, Kerrville TX — warm-craft / saddle-leather /
   ledger-stack. Compiled from runs/kerr-country-pump-service-kerrville-tx/
   brief.md §3 (type), §4 (colour), §5 (fluid scale), §6 (layout), §7
   (imagery), §8 (motion). Every value below restates a brief value; nothing
   here is improvised (house-tech-spec §3, §12).
   ========================================================================== */

:root {

  /* --- Colour --------------------------------------------------------------
     Brief §4. No real-world colour to echo (dossier §7, §10 — none found,
     none guessed); derived from local character (rural Hill Country
     ranch-leather / caliche-limestone, dossier §7 I-tier) and warm-craft's
     own family norms (ref-010). One deliberate mode: light. */

  --scheme: light;

  --color-bg:          #F6EFE2;  /* caliche-cream — the ground */
  --color-surface:     #FBF6EC;  /* ledger-page cream, card/section-alt ground */
  --color-ink:         #2B2016;  /* near-black warm brown — ledger ink */
  --color-ink-muted:   #6B5B47;  /* field labels, fine print */
  --color-accent:      #7A4A2A;  /* saddle-leather — dominant hue */
  --color-accent-ink:  #FFFFFF;  /* on-accent label colour (CTA, chips) */

  /* Decorative only, never text — the hero's single water glint (brief §4, §7). */
  --color-water:       #4B8C8A;

  /* House-required structural colours; both reuse already-approved tokens
     rather than inventing a new hue (parks-and-sons/welding-contractors
     convention for this exact pair). */
  --color-border:        rgb(107 91 71 / 0.18);  /* = --color-ink-muted, decorative hairline only */
  --color-border-strong:  #6B5B47;                /* = --color-ink-muted — control boundary, 5.72:1 vs bg */

  --color-focus: #7A4A2A;             /* = --color-accent — 6.47:1 vs bg, 6.87:1 vs surface (brief §4) */
  --color-selection-bg: #7A4A2A;
  --color-selection-ink: #FFFFFF;

  /* No dark band on this site (brief §4) — no --color-focus-on-band token. */

  /* The ledger's ruled-row divider, flattened to a static rule, reused as
     the head-rule atop every section (brief §8's signature move). */
  --color-rule: rgb(107 91 71 / 0.45);

  /* --- Typography ----------------------------------------------------------
     Brief §3. EB Garamond 600 upright + 600 italic, Karla variable 400/700.
     Weight set with font-weight only; no font-variation-settings anywhere
     (brief §3, house-tech-spec §8). */

  --font-display:         'EB Garamond', 'EB Garamond Fallback', 'Iowan Old Style', Georgia, serif;
  --font-display-italic:  'EB Garamond Italic', 'EB Garamond Italic Fallback', 'Iowan Old Style', Georgia, serif;
  --font-body:             'Karla', 'Karla Fallback', 'Trebuchet MS', 'Segoe UI', sans-serif;

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

  /* --- Fluid type scale — brief §5, every clamp floors at 375px / ceils at
     1440px exactly. --text-h3 is unused on this page (no h3 element ships)
     and is intentionally not declared. */

  --text-eyebrow:      clamp(0.8125rem, 0.769rem + 0.188vw, 0.9375rem); /* 13.01px @375 -> 15.01px @1440 */
  --text-h1:           clamp(2.1rem, 1.519rem + 2.479vw, 3.75rem);      /* 33.60px @375 -> 60.00px @1440 */
  --text-h2:           clamp(1.375rem, 1.199rem + 0.751vw, 1.875rem);   /* 22.00px @375 -> 30.00px @1440 */
  --text-lead:         clamp(0.95rem, 0.866rem + 0.357vw, 1.1875rem);   /* 15.20px @375 -> 19.00px @1440 */
  --text-body:         clamp(1rem, 0.956rem + 0.188vw, 1.125rem);       /* 16.00px @375 -> 18.00px @1440 */
  --text-small:        clamp(0.875rem, 0.842rem + 0.141vw, 0.96875rem); /* 14.00px @375 -> 15.50px @1440 */
  --text-ledger-value: clamp(1.15rem, 1.071rem + 0.338vw, 1.375rem);    /* 18.40px @375 -> 22.00px @1440 */
  --text-ledger-head:  clamp(1.1rem, 1.030rem + 0.300vw, 1.3rem);       /* 17.60px @375 -> 20.79px @1440 */
  --text-fact:         clamp(0.85rem, 0.815rem + 0.150vw, 0.95rem);     /* 13.60px @375 -> 15.20px @1440 */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* --- Space ----------------------------------------------------------------
     House scale, unchanged — the brief does not override it. */

  --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;

  /* Brief §5: section-gap floors at 40px below 400px, ceils at 72px above
     2000px (informational). @375px: 40px. @1440px: 60.8px (fluid). Two call
     sites only: .section's padding-block and the hero's padding-block-end. */
  --section-gap: clamp(2.5rem, 2rem + 2vw, 4.5rem);

  /* --- Layout ----------------------------------------------------------------
     Brief §6.2: 1200px container, centred, desktop breakpoint >= 64rem. */

  --layout-container: 75rem;          /* 1200px */
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Brief §6.2 desktop composition widths. Hero columns as fr-ratio tracks
     (552:648, 45.8%/54.2%) rather than fixed px, so the split holds below
     1200px too — a fixed-px pair overflows a narrower container. */
  --content-hero-text:    552fr;   /* 45.8% — hero text column @>=64rem */
  --content-hero-field:   648fr;   /* 54.2% — hero living-hero field @>=64rem */
  --content-ledger:       47.5rem;  /* 760px — "The Ledger" centred column */
  --content-entries:      42.5rem;  /* 680px — "Ledger Entries" centred column */
  --content-consult:      40rem;    /* 640px — "Call / Consult" centred column */
  --services-col-gap:     3rem;     /* 48px — Services 2-col grid column-gap */

  /* Living-hero field height — brief §6.1/§6.2: 220px stacked (<64rem),
     min-height 600px within the 648px column (>=64rem). */
  --field-height:          13.75rem;  /* 220px */
  --field-height-desktop:  37.5rem;   /* 600px */

  /* Measure caps from Tile B's own gated markup (brief §6.2): hero lead at
     desktop, and the H1's wrap width within the 552px text column. */
  --measure-lead:          36ch;
  --measure-h1-desktop:    16ch;

  /* Sticky-stack planning figure (brief §6.1), re-measured at build;
     consumed by preview.css's scroll-margin rule. */
  --header-height: 4.5rem;

  /* --- Radius / shadow / border --------------------------------------- */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(43 32 22 / 0.06);
  --shadow-md: 0 6px 24px rgb(43 32 22 / 0.09);
  --shadow-lg: 0 24px 60px rgb(43 32 22 / 0.14);

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

  /* --- Motion ------------------------------------------------------------
     House reveal system (unchanged) plus brief §8's four independent,
     non-synchronised living-hero loops — "the ledger keeps." */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
  --duration-reveal: 420ms;

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

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* Brief §8 — four independent ambient loops, no shared common multiple. */
  --loop-cable: 6.9s;
  --loop-sprig: 7.4s;
  --loop-page: 5.6s;
  --loop-glint: 4.3s;

  /* Reduced-motion resting poses (brief §8's table) — named here so site.css
     carries no literal transform/opacity value. */
  --rest-cable: rotate(0.3deg);
  --rest-sprig: rotate(-0.1deg);
  --rest-page: rotate(-0.25deg);
  --rest-glint-opacity: 0.55;

  /* --- Z layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* @allow-literal: a duration token must resolve to a real time value */
    --loop-cable: 0.01ms;
    --loop-sprig: 0.01ms;
    --loop-page: 0.01ms;
    --loop-glint: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, font-display: swap.
   Static EB Garamond roman (600) + italic (600); variable Karla (400-700).
   Subset to house-tech-spec §8's declared safe range; identical unicode-
   range on all three faces (brief §3).
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-600-roman-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;
}

@font-face {
  font-family: 'EB Garamond Italic';
  src: url('../assets/fonts/eb-garamond-600-italic-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  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: 'Karla';
  src: url('../assets/fonts/karla-latin-var.woff2') format('woff2');
  font-weight: 400 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;
}

/* --- Metrics-matched fallbacks (house-tech-spec §7, §8) --------------------
   Georgia is the metric donor for both EB Garamond instances; Arial for
   Karla — the same donors and the same measured overrides
   que-chilero-smithfield-ut and parks-and-sons-masonry-davenport-ia carry
   for the identical font files, measured via canvas.measureText() in
   headless Chromium against the real shipped woff2 files. Acceptance test:
   Lighthouse CLS 0.000. -------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond Fallback';
  src: local('Georgia');
  size-adjust: 92.9%;
  ascent-override: 108.4%;
  descent-override: 32.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'EB Garamond Italic Fallback';
  src: local('Georgia');
  font-style: italic;
  size-adjust: 90.3%;
  ascent-override: 111.5%;
  descent-override: 33.0%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Liberation Sans');
  size-adjust: 101.3%;
  ascent-override: 90.5%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}