/* ==========================================================================
   AK TREECARE — DESIGN TOKENS
   Single source of truth for the brand system. Change a value here and it
   cascades across the whole site. Locked brand: Worksite palette (28 Jun 2026).
   ========================================================================== */

:root {
  /* ---- Colour: Worksite palette (NO green). 90/10 orange rule. ---------- */
  --color-orange:      #F26419; /* Safety Orange — primary accent, ~10% of any view */
  --color-orange-deep: #D9501A; /* hover/active + focus rings on light: 3.68:1 on paper */
  --color-orange-ink:  #B33E0F; /* the ONLY orange allowed on small text over paper.
                                   5.20:1 on paper, 4.71:1 on the warm tint — the bright
                                   Safety Orange measures 2.84:1 / 2.58:1 and fails AA
                                   outright. Bright orange stays the accent; this is its
                                   text-legal twin. */
  --color-ink:         #1A1A1A; /* Near-black — primary text + dark surfaces */
  --color-ink-soft:    #2A2A2A; /* slightly lifted dark surface */
  --color-steel:       #5A5A5A; /* Steel Grey — fine print, secondary text */
  --color-steel-light: #8A8A8A; /* muted labels on dark */
  --color-paper:       #F5F2EC; /* Off-White — page background */
  --color-paper-warm:  #ECE7DC; /* subtle alternating section tint */
  --color-white:       #FFFFFF;
  --color-line:        #E2DCD0; /* hairline borders on paper */
  --color-line-dark:   #3A3A3A; /* hairline borders on ink */

  /* ---- Semantic roles -------------------------------------------------- */
  --bg-page:      var(--color-paper);
  --bg-alt:       var(--color-paper-warm);
  --bg-dark:      var(--color-ink);
  --text-primary: var(--color-ink);
  --text-muted:   var(--color-steel);
  --text-on-dark: var(--color-paper);
  --accent:       var(--color-orange);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* headlines, logo */
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-hero:    clamp(2.75rem, 7vw, 5.5rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.45rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em; /* wide-tracked uppercase labels */

  /* ---- Spacing scale --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem); /* vertical rhythm between sections */

  /* ---- Layout ---------------------------------------------------------- */
  --maxw:       1200px;
  --maxw-text:  62ch;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --header-h:   72px;

  /* ---- Radii, borders, shadows ----------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.08);
  --shadow:    0 8px 24px rgba(26, 26, 26, 0.10);
  --shadow-lg: 0 20px 50px rgba(26, 26, 26, 0.22);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         0.25s;
  --dur-slow:    0.5s;
}