/* Design tokens — Exterior Services LLC */
/* Client palette and scale live here and reach page CSS through var().
   CORRECTED at the D6 comment audit — the old wording ("Never raw hex or raw px
   in page CSS") asserted more than the code does. Two real exceptions:
   (1) base.css:591/596/599 use raw hex for the Sites by Bob footer signature —
       #1D2030 and #FFD84D are the STUDIO's brand colours, deliberately not the
       client's tokens, so the signature stays constant across every SBB site;
   (2) raw px still appears where it is structural rather than palette/scale
       (1px hairlines, the 64px --nav-h derivation, SVG data-URI geometry).
   The rule that is actually enforced: no client-palette colour and no spacing
   or type value may be hard-coded in page CSS — those come from the tokens
   below. Nothing here changed behaviour; only the claim was corrected. */

:root {
  /* Color palette */
  --paper:   #F5F3EC;
  --paper-2: #EFECE2;
  --ink:     #161B18;
  --char:    #1C231E;
  --char-2:  #232B25;
  --green:   #1E7A36;
  --green-lt:#57B674;
  --white:   #FFFFFF; /* Option 2 logo grammar only (Brief 10) — not a page surface color */
  --sand:    #C9BFA8;
  --line:    #DCD8CB;

  /* Derived / mixed — computed from palette, never raw hex */
  --mut:     color-mix(in srgb, var(--ink)   60%, var(--paper));
  --mut-d:   color-mix(in srgb, var(--paper) 68%, var(--char));
  --hair:    color-mix(in srgb, var(--ink)   14%, transparent);
  --hair-d:  color-mix(in srgb, var(--paper) 20%, transparent);

  /* Typography — Direction B locked (Brief 3) */
  --font-sans:    'Manrope', sans-serif;
  --font-display: 'Zilla Slab', Georgia, serif;
  --font-hero:    'Bricolage Grotesque', var(--font-sans); /* homepage hero billboard ONLY (Brief 13) */

  /* Layout */
  --gutter: clamp(1rem, 5vw, 5rem);

  /* Radii — from Direction B plate/frame system */
  --r:       6px;   /* base radius: image panels, chips */
  --r-frame: calc(var(--r) + var(--sp-2));  /* outer frame: sand border wrapping a panel */
  --r-card:  8px;   /* card radius: trust card, foot__sig chip */
  --r-pill:  999px; /* pill: buttons, town chips, skip link */

  /* Shadow — floating trust card */
  --shadow-card: 0 24px 48px color-mix(in srgb, var(--ink) 14%, transparent);

  /* Type scale — modular (major third, base 1rem) */
  --fs-1: 0.75rem;    /* 12px — labels, legal */
  --fs-2: 0.875rem;   /* 14px — captions, meta */
  --fs-3: 1rem;       /* 16px — body */
  --fs-4: 1.25rem;    /* 20px — lead, sub-headings */
  --fs-5: 1.5rem;     /* 24px — h3 */
  --fs-6: 2rem;       /* 32px — h2 */
  --fs-7: 3rem;       /* 48px — h1, hero */

  /* Spacing scale */
  --sp-1: 0.25rem;    /* 4px */
  --sp-2: 0.5rem;     /* 8px */
  --sp-3: 0.75rem;    /* 12px */
  --sp-4: 1rem;       /* 16px */
  --sp-5: 1.5rem;     /* 24px */
  --sp-6: 2.5rem;     /* 40px */
  --sp-7: 4rem;       /* 64px */
  --sp-8: 7rem;       /* 112px */

  /* Nav height (Brief 18). The nav is a SOLID bar on every page at every scroll
     position, so it occupies space instead of floating over the hero: body is
     padded by this, .hero subtracts it from 100svh, and html scroll-padding-top
     uses it so in-page anchors do not land underneath the bar. Measured against
     the 44px whole-badge lockup + --sp-2 block padding (Brief D15; same 60px
     content height the original 36px mark + sp-3 produced). */
  --nav-h: 4rem;      /* 64px */
}