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

   Civic's Pool Service, Tampa FL — warm-craft / cypress-rust/warm-cream/light
   / postcard-stack. Compiled from runs/civics-pool-service-tampa-fl/brief.md
   §4 (colour, type), §5 (layout, scale), §7 (motion). Every value below
   restates a brief value; nothing here is improvised (house-tech-spec §3,
   §12).
   ========================================================================== */

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

  /* --- Colour (brief §4.2). Derivation order (design-rules §6): (1) real-
     world colour — void, dossier §4.5; (2) local character — cypress/rust
     Tampa Bay patio material; (3) family norms — cream/ink ground, rust as
     the one accent (not warm-craft's more common green — sidesteps the
     landscaping misread, playbook §6). */
  --color-bg:        #F8F1E4;   /* page ground — warm cream */
  --color-surface:   #F0E4CE;   /* raised panels — facts-row chips, trust/service-area bands */
  --color-card:      #FFFAF0;   /* postcard/note-card ground — brief-added 7th role (§4.2) */
  --color-ink:       #2E211A;   /* body + heading text on bg/surface/card */
  --color-ink-muted: #5C4A3D;   /* secondary text, captions, review attributions; also the control-boundary colour */

  --color-accent:     #A6532B;  /* cypress-rust — eyebrow, CTA fill, ledger marks. Text role is bg/card ground ONLY — never on --color-surface (§4.3 forbidden pairing) */
  --color-accent-ink: #F8F1E4;  /* text set ON the accent fill (CTA button label) */

  --color-border:        rgba(46, 33, 26, .12);  /* decorative hairlines only — postcard border, twine */
  --color-border-strong: #5C4A3D;                /* = --color-ink-muted — a control's own boundary (WCAG 1.4.11) */
  --color-focus:          #2E211A;               /* = --color-ink — :focus-visible everywhere */
  --color-selection-bg:   #2E211A;
  --color-selection-ink:  #F8F1E4;

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

  /* --color-sprig — decorative surround ONLY, never text/CTA/accent (brief
     §4.2). The hero's palm sprig, CSS/SVG only (§6.2), ≤15% field width. */
  --color-sprig:        #3E6B4A;   /* sprig gradient start */
  --color-sprig-light:  #6A9C72;   /* sprig gradient end */

  /* --- Typography (brief §4.4) -----------------------------------------------
     EB Garamond (display, static 600 upright + static 500 italic) + Karla
     (body, static 400 + 700). Four woff2 — design-rules §5's cap, met
     exactly. Weight is set with font-weight and NOTHING else: static
     instances, so font-variation-settings never appears on this site. */

  --font-display:     'EB Garamond',        'EB Garamond Fallback',        Georgia, 'Times New Roman', serif;
  --font-emphasis:    'EB Garamond Italic', 'EB Garamond Italic Fallback', Georgia, 'Times New Roman', serif;
  --font-body:        'Karla',              'Karla Fallback',              ui-sans-serif, system-ui, sans-serif;
  --font-body-strong: 'Karla Strong',       'Karla Strong Fallback',       ui-sans-serif, system-ui, sans-serif;

  --font-weight-body:        400;
  --font-weight-body-strong: 700;
  --font-weight-display:     600;   /* upright H1/H2 */
  --font-weight-emphasis:    500;   /* the H1's italic accent word, italic cut */

  /* --- Fluid scale (brief §4.5, computed at every clamp floor/ceiling and at
     375px/1440px in the brief's own table) ----------------------------------- */

  --text-eyebrow: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);   /* 12px @375 (floor, <400px) -> 14px @1440 (ceiling) */
  --text-h1:      clamp(2rem, 1.5rem + 3vw, 3.75rem);          /* 35.25px @375 (fluid) -> 60px @1440 (ceiling) */
  --text-h2:      clamp(1.4rem, 1.2rem + 1vw, 2rem);           /* 22.95px @375 (fluid) -> 32px @1440 (ceiling) */
  --text-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      /* 16.33px @375 (fluid) -> 18px @1440 (ceiling) */
  --text-body:    clamp(0.95rem, 0.93rem + 0.15vw, 1rem);      /* 15.44px @375 (fluid) -> 16px @1440 (ceiling) */
  --text-small:   0.8125rem;   /* fixed — 13px, every width (brief §4.5: a short label does not benefit from viewport-linked scaling) */
  --text-cta:     0.9375rem;   /* fixed — 15px, every width. Never set the CTA label smaller than this (§4.3: narrowest contrast margin on the page, 4.80:1) */

  --leading-tight:   1.08;   /* h1 */
  --leading-snug:    1.25;   /* buttons, eyebrow */
  --leading-eyebrow: 1.3;
  --leading-lead:    1.5;
  --leading-facts:   1.3;
  --leading-body:    1.6;    /* reading paragraphs */

  --tracking-tight:  -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.07em;   /* eyebrow, kicker labels — uppercased via text-transform, never typed in caps */

  /* --- Space — the house scale, unchanged (brief cites these steps directly) */

  --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. Brief §4.5's "var(--space-2xl)
     = 5rem = 80px" is a brief defect (README): this scale has no 5rem rung
     (--space-xl 4rem, --space-2xl 6rem), and §7.1 requires an actual step,
     never a free value. Nothing load-bearing needs exactly 80px, so this
     takes the skeleton's own default. */
  --section-gap: var(--space-xl);   /* 64px, fixed at every breakpoint */

  /* --- Layout ----------------------------------------------------------------- */

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

  /* Postcard-stack sizing, named here rather than left as literals in
     site.css (house-tech-spec §3). --postcard-max-width: a postcard reads as
     one continuous note at any size, never full-bleed (brief §2).
     --content-max-width: the reading column every section sits in, instead
     of the full 72rem container (keeps 1440px line length in bounds,
     design-rules §7.2). --header-height: measured against the live DOM
     (§7.2 rule 3 — a measurement, not a token sum), used by the anchor-jump
     scroll-margin below. */
  --postcard-max-width: 30rem;   /* 480px */
  --content-max-width:  38rem;   /* 608px */
  --header-height:      78px;

  /* Decorative marks: the note-card's torn-tape top accent (brief §4.5
     cites this element and its 34x12px size directly) and the twine-and-pin
     corner mark heading the Pool School/Note cards (brief §7). */
  --tape-width:  34px;
  --tape-height: 12px;
  --tape-offset: -6px;
  --pin-mark-size: 1.5rem;
  --divider-img-max-width: 4rem;
  --card-img-max-width: 16rem;

  /* --- Radius / shadow / border. No --shadow-* token carries a heavy
     elevation value except the postcard's own (brief §4.2): the postcard's
     drop shadow is the ONE shadow on the page, reading as a physical object
     pinned above flat ground. Everything else is flat, rule-and-whitespace
     separation, per ref-010's letterpress-card logic. -------------------- */
  --radius-none: 0;
  --radius-sm:   3px;          /* postcard + note cards only; no rounded pills beyond the CTA */

  --shadow-none:     none;
  --shadow-postcard: 0 10px 22px rgba(0, 0, 0, .18);   /* the one shadow on the page (brief §4.2) */

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

  /* --- Motion (brief §7) ------------------------------------------------------
     Standard reveals: --duration-base fade+rise, staggered. The one
     signature move, "the note settles": one one-shot settle on load plus two
     independent, non-synced ambient ​loops — the sprig sway (7.4s) and the
     water-bead glint pulse (5.6s), hero-only. */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;
  --duration-settle: 1000ms;   /* the postcard's one-shot settle-on-load, "~1s" per brief §7 */

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

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

  --loop-sprig-sway: 7.4s;    /* ambient loop A — the sprig sway (brief §7) */
  --loop-water-glint: 5.6s;   /* ambient loop B — the water-bead glint pulse (brief §7), never synced to loop A */

  /* The settle transform's start/end states (brief §7: translateY(24px)
     rotate(-8deg) -> translateY(0) rotate(-4deg)). Named as tokens per
     house-tech-spec §3 rather than literals in site.css. */
  --postcard-rest-rotate:  -4deg;
  --postcard-start-rotate: -8deg;
  --postcard-start-y:      24px;

  /* Reduced-motion rest state (brief §7's reduced-motion statement): the
     postcard renders directly at its final resting position and rotation;
     the sprig sits fixed, upright (not mid-sway); the glint sits at a fixed,
     visible opacity/scale rather than pulsing. */
  --sprig-rest-rotate:  0deg;
  --glint-rest-opacity: 0.65;
  --glint-rest-scale:   1;

  /* The hero's radial atmosphere (brief §4.3): sits BEHIND the postcard
     image only, built from this site's own bg/surface tones per ref-001's
     adapted technique (§1). No text ever renders over it. */
  --hero-atmosphere: radial-gradient(60% 60% at 50% 42%,
    var(--color-surface) 0%, #E8D6B4 55%, #D9BF95 100%);

  --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 */
    --duration-settle: 0.01ms;
    --loop-sprig-sway: 0.01ms;
    --loop-water-glint: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   @font-face — self-hosted woff2, latin subset, font-display: swap. Static
   EB Garamond upright 600 + italic 500; static Karla 400 + 700. Identical
   unicode-range on all four faces (brief §4.4, house-tech-spec §8).

   COVERAGE NOTE (§8's "declared codepoint no face carries" paragraph):
   U+2010-2012/2015 are absent from all four faces (same gap the house doc
   already records for its pilot faces, not narrowed for it). Karla also
   lacks U+2032/U+2033 (feet/inch marks), which EB Garamond carries — dormant
   since no copy on this site sets either character; recorded per §8's "a
   face missing what the other face on the same site carries" clause. */

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

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

/* --- Metrics-matched fallbacks (house-tech-spec §7, §8). Measured with
   scripts/font-metrics.mjs against these four shipped woff2 files (avgChar-
   Width weighted per English letter frequency), against Gelasio (Georgia's
   metric-compatible standby) and Liberation Sans (Arial's). Acceptance
   test: Lighthouse CLS 0.000. --------------------------------------------- */

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

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

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

@font-face {
  font-family: 'Karla Strong Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 700;
  size-adjust: 100.06%;
  ascent-override: 91.64%;
  descent-override: 25.18%;
  line-gap-override: 0%;
}