/* ============================================================================
   WEB-LIBRARY — DESIGN TOKENS
   ============================================================================
   Every section/component in this library is written against these variable
   NAMES, never against hardcoded colors/fonts/sizes. That contract is what
   lets any section from /sections drop into any client project and restyle
   correctly just by swapping the values below.

   Structure mirrors the Kit Maker model already used for Elementor builds
   (10 color roles, 10 responsive typography roles — see
   web-library/references/be-express-pattern-language.md), so a kit built
   here and a kit built in Elementor stay speaking the same language.

   Typography and section rhythm use fluid clamp(min, preferred-vw, max)
   values rather than fixed px + breakpoint overrides — this is the actual
   technique behind the flagship hand-coded build studied in
   web-library/references/aiken-code-study.md, and it scales continuously
   instead of jumping at two or three fixed breakpoints.

   HOW TO START A NEW CLIENT PROJECT:
   1. Copy this file into the project.
   2. Only touch the "PER-CLIENT" block below — accent color, heading/body
      fonts, and the radius dial. Pick these to match the brand personality,
      never reuse the same pairing across unrelated clients (see
      web-library/references/client-sites-pattern-language.md for why).
   3. Leave the STRUCTURAL DEFAULTS section and all variable names alone.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------
     PER-CLIENT — swap per project
     --------------------------------------------------------------------- */

  /* Color roles — 1:1 with Kit Maker's Color Settings panel */
  --color-heading:     #0b0c0c; /* near-black; avoid true #000 — no site studied used it */
  --color-text:        #161715; /* muted body gray */
  --color-light-bg:    #f8f5ec; /* off-white section background */
  --color-white:       #f8f5ec;
  --color-transparent: transparent;
  --color-accent:      #ff4b18; /* the ONE accent — interactive/emphasis elements only, never a passive fill */
  --color-dark-bg:     #0b0c0c; /* near-black section / nav / footer background */
  --color-accent-2:    #ff4b18; /* open slot — leave equal to --color-accent unless the brief needs a second tone */
  --color-accent-3:    #ff4b18; /* open slot */
  --color-border:      #d8d5cb;

  /* Fonts — one bold/distinctive display face for headings, one workhorse
     sans for body. These are placeholders; pick fresh per client. */
  --font-heading: "Anton", sans-serif;
  --font-body:    "DM Sans", sans-serif;

  /* Shape language — sharp = industrial/technical/urgent, soft = friendly/
     approachable. Flip these two values to shift the whole site's feel. */
  --radius-structure:   0px; /* cards, section wrappers, images at rest */
  --radius-interactive: 2px; /* buttons, pills, tabs, badges — try 999px for a full-pill brand */

  /* ---------------------------------------------------------------------
     STRUCTURAL DEFAULTS — rarely change per client
     --------------------------------------------------------------------- */

  /* Container — fluid side padding instead of a fixed gutter, so it eases
     from mobile to desktop instead of snapping at a breakpoint. */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 56px);

  /* Section rhythm — the one padding value used for nearly every big
     section (hero excluded). Also fluid. */
  --section-pad-y: clamp(90px, 12vw, 160px);

  /* Spacing scale — for component-internal gaps (icon-to-label, card
     padding, button padding). Discrete is fine at this size; it's the
     big structural rhythm above that needs to be fluid. */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  /* Motion — one shared easing curve reused everywhere, the way a flagship
     hand-coded build does it (see aiken-code-study.md — this is their
     literal --ease value, confirmed from source). */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;

  /* Shadow — subtle elevation only; hairlines/whitespace carry structure,
     not heavy shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 12px 32px -16px rgba(0,0,0,.18);

  /* Hero video overlay — every video hero studied uses a dark scrim for
     text legibility over motion */
  --hero-overlay-color: rgba(0,0,0,.45);

  /* Mobile thumb CTA bar — fixed bottom action bar (see Elite Roofing) */
  --mobile-cta-bar-height: 64px;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY ROLES — 1:1 with Kit Maker's Typography Settings panel,
     but fluid: each clamp(min, preferred, max) replaces what used to be a
     desktop value plus two @media overrides. One line, no breakpoints,
     no jump cuts as the viewport resizes.
     --------------------------------------------------------------------- */
  --h1-size: clamp(36px, 4.5vw + 20px, 92px); --h1-weight: 700; --h1-leading: 1.1; --h1-tracking: -0.02em;
  --h2-size: clamp(32px, 3.6vw + 18px, 68px); --h2-weight: 700; --h2-leading: 1.1; --h2-tracking: -0.02em;
  --h3-size: clamp(28px, 2.6vw + 16px, 44px); --h3-weight: 700; --h3-leading: 1.15; --h3-tracking: -0.02em;
  --h4-size: clamp(24px, 1.8vw + 14px, 32px); --h4-weight: 700; --h4-leading: 1.15; --h4-tracking: -0.02em;
  --h5-size: clamp(20px, 1.2vw + 13px, 26px); --h5-weight: 700; --h5-leading: 1.2;  --h5-tracking: -0.02em;
  --h6-size: clamp(18px, 0.8vw + 12px, 22px); --h6-weight: 700; --h6-leading: 1.25; --h6-tracking: -0.02em;

  --text-size: 16px;       --text-weight: 400;     --text-leading: 1.6;
  --sub-text-size: clamp(15.5px, 0.3vw + 14px, 18px); --sub-text-weight: 400; --sub-text-leading: 1.5;
  --subtitle-size: 14px;   --subtitle-weight: 600; --subtitle-leading: 1;   --subtitle-tracking: .08em;
  --button-text-size: 16px; --button-text-weight: 600; --button-text-leading: 1;
}