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

   Parks & Parks and Sons Masonry, Moline IL (Quad Cities) — warm-craft /
   hearth-brick / split-hero. Compiled from
   runs/parks-and-sons-masonry-davenport-ia/brief.md §3.3 (colour/type/space/
   layout/radius/motion), §2 (fonts), §4 (contrast), §8 (motion). Every value
   below restates a brief value; nothing here is improvised (house-tech-spec
   §3, §12).

   ONE CORRECTION CARRIED FROM THE TILE, made explicit in the brief §3.3:
   --color-border-strong is #6b5d54 (not the tile's #9c8a7a) — the tile value
   measured 2.57:1 against the hero gradient's darkest stop (WCAG 1.4.11
   FAIL); the corrected value measures 4.90:1 there (brief §4.3, N-hero-2).
   ========================================================================== */

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

  /* --- ground + ink ------------------------------------------------------- */
  --color-bg:              #f4ede4;   /* limestone-cream */
  --color-surface:         #ffffff;   /* trust-strip cards, form fields */
  --color-ink:             #2a201c;   /* warm near-black */
  --color-ink-muted:       #6b5d54;

  /* --- accent — hearth-brick, fired-clay red-brown ------------------------- */
  --color-accent:          #8a3a2b;
  --color-accent-ink:      #fdf6f0;   /* text ON accent (buttons, marks) */

  /* --- hero atmosphere (design-rules §0 — never a flat ground) ------------- */
  --color-halo-cream:      #fbf5ee;   /* lightest gradient stop */
  --color-halo-clay:       #ece1d2;   /* darkest gradient stop */

  /* --- lines, focus, selection --------------------------------------------- */
  --color-border:          #ddd0c2;   /* DECORATIVE HAIRLINE ONLY */
  --color-border-strong:   #6b5d54;   /* CORRECTED from the tile's #9c8a7a — brief §3.3 */
  --color-focus:           #8a3a2b;   /* clears >=3:1 against bg, surface AND every gradient stop — brief §4.3 */
  --color-selection-bg:    #8a3a2b;
  --color-selection-ink:   #fdf6f0;

  /* No dark band anywhere on this site (brief §4.2): --color-focus covers
     every focusable element on the page. No --color-focus-on-band token. */

  /* --- type ----------------------------------------------------------------- */
  --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 scale — brief §3.3, computed at 375px and 1440px -------------- */
  --text-hero:    clamp(2.6rem, 9vw, 5rem);      /* 41.6px @375 -> 80px @1440+ */
  --text-h2:      clamp(1.9rem, 5vw, 3rem);      /* 30.4px @375 -> 48px @1440+ */
  --text-h3:      clamp(1.3rem, 3vw, 1.75rem);   /* 20.8px @375 -> 28px @1440+ */
  --text-lead:    clamp(1.125rem, 2.2vw, 1.375rem); /* 18px @375 -> 22px @1440+ */
  --text-body:    clamp(1rem, 1.4vw, 1.0625rem); /* 16px @375 -> 17px @1440+ */
  --text-small:   0.9375rem;                     /* 15px, fixed */
  --text-eyebrow: 0.8125rem;                     /* 13px, fixed */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:  0.08em;

  /* --- space ----------------------------------------------------------------- */
  --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 only:
     .section's padding-block and the hero's padding-block-end. */
  --section-gap: var(--space-xl);              /* 64px, at every width */

  /* --- layout ------------------------------------------------------------------ */
  --layout-container: 72rem;                    /* 1152px */
  --layout-measure:   62ch;
  --layout-gutter:    clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min:   44px;
  --layout-header-height: calc(var(--layout-tap-min) + var(--space-2xs));  /* 52px, a MIN */
  --field-height:          220px;   /* below 64rem — split-hero stacked */
  --field-height-desktop:  340px;   /* at/above 64rem — split-hero side-by-side */

  /* --- radius / border -------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --border-hairline: 1px;
  --border-thick:    2px;
  --border-style:    solid;

  /* No --radius-lg / --radius-pill (brief §3.3 — a token that cannot be
     reached cannot be reached by accident). No --shadow-md / --shadow-lg —
     the letterpress offset below is the site's only shadow. */

  /* --- the letterpress offset — the ONLY shadow on this site, ref-010 --------- */
  --shadow-letterpress: 3px 3px 0 var(--color-accent);
  --press-shift: 2px;

  /* --- motion (brief §8) -------------------------------------------------------- */
  --duration-fast: 140ms;  --duration-base: 320ms;  --duration-slow: 640ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-shift: 1.25rem;  --reveal-stagger: 90ms;

  --loop-glint: 7.4s;               /* trowel-glint sweep, hero — independent, non-synced */
  --duration-joint-strike: 640ms;   /* the one-shot draw, on load */

  /* The joint-strike head-rule's fixed geometry (brief §6.6): a 48px cream
     mark, inset --space-md (24px) from the section's left edge, with no
     minimum-collapse case — it is authored as fixed-size, not proportional. */
  --joint-mark-width: 48px;

  /* Reduced-motion rest state for the trowel-glint (brief §8's table):
     held at 40% travel position, 0.5 opacity — never invisible, never mid-
     sweep. Named here so site.css carries no literal transform value. */
  --glint-rest-transform: translateX(40%);
  --glint-rest-opacity: 0.5;

  /* Component widths the brief does not cite a number for, named here
     rather than left as bare literals in site.css (house-tech-spec §3) —
     the same convention que-chilero-smithfield-ut's tokens.css documents
     for its own --media-rail-width. */
  /* Fixed HEIGHT, not width (Critic r1 lensB/rhythm fix): the stone-veneer
     specimen sits inline in its services-index row, capped so the row's
     total height stays a small multiple of every sibling row rather than
     the 4.7x-6.4x break a wide block image produced — width is left to the
     browser's own intrinsic-aspect-ratio computation from the image's
     width/height attributes (3:4), so no separate width token is needed. */
  --services-media-height: 3rem;   /* the stone-veneer specimen, §II */
  --process-media-width:  20rem;   /* the trowel-and-joint specimen, §IV */
  --review-media-width:   16rem;   /* the chimney specimen, §V */

  --z-base: 0;  --z-header: 100;  --z-skip-link: 300;
}

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

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

@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-400-italic-latin.woff2') format('woff2');
  font-weight: 400;
  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; brief §2.4) --------
   Georgia is the metric donor for both EB Garamond instances; Arial for
   Karla. Measured via canvas.measureText() in headless Chromium against the
   real shipped woff2 files (see README.md for the full derivation).
   Acceptance test: Lighthouse CLS 0.000. -------------------------------------------------------------------------- */

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

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

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