/* ==========================================================
   Phil Chigos for Town Council: Design System (tokens)
   Uncommon Common Sense
   ========================================================== */
:root {
  /* Brand */
  --color-green:        #7ee2a8;  /* primary brand / hero */
  --color-yellow:       #ffe500;  /* primary action */
  --color-black:        #000;     /* button borders + stepped shadow */
  --color-ink:          #111;     /* text, dark UI */
  --color-charcoal:     #2B2B2B;  /* quote band */

  /* Neutrals (cream family) */
  --color-white:        #fff;
  --color-paper:        #FFFDF6;
  --color-cream:        #FBF8EE;  /* page background */
  --color-cream-100:    #F6F2E6;  /* hover */
  --color-cream-200:    #F1ECDB;  /* secondary surface */
  --color-cream-300:    #E9E3CF;  /* image placeholder */
  --color-line:         #D9D4C3;  /* dividers, card borders */
  --color-line-strong:  #CFC9B6;  /* inputs */
  --color-line-muted:   #B5AF9E;

  /* Text greys */
  --color-text-body:    #333;
  --color-text-muted:   #444;
  --color-text-subtle:  #555;
  --color-text-faint:   #6b6b6b;
  --color-grey-300:     #bbb;
  --color-grey-200:     #ccc;     /* footer links */
  --color-footer-fine:  #8A8676;  /* footer small print */

  /* Overlays */
  --overlay-white-70:   rgba(255,255,255,.7);
  --overlay-ink-08:     rgba(17,17,17,.08);
  --overlay-ink-12:     rgba(17,17,17,.12);
  --overlay-ink-82:     rgba(17,17,17,.82);
  --overlay-charcoal-90:rgba(43,43,43,.9);
  --overlay-cream-20:   rgba(251,248,238,.2);

  /* Type */
  --font-heading: Oswald, sans-serif;               /* headings, buttons */
  --font-body:    'Instrument Sans', sans-serif;    /* body copy */
  --font-label:   'IBM Plex Mono', monospace;       /* labels / eyebrows */
  --font-script:  Caveat, cursive;

  --text-label:   12px;
  --text-xs:      13px;
  --text-sm:      14px;
  --text-md:      16px;
  --text-lg:      18px;
  --text-h3:      28px;
  --text-h2:      44px;                             /* Semibold */
  --text-h1:      clamp(34px, 4vw, 52px);           /* Bold */

  /* Radius */
  --radius-sm:    6px;
  --radius-md:    14px;
  --radius-lg:    20px;                             /* photos, cards */
  --radius-xl:    24px;                             /* hero cards */

  /* Layout */
  --container:    1200px;
  --gutter:       24px;

  /* Section spacing (shrinks on mobile) */
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-72:  72px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-220: 220px;

  /* Stepped button shadow */
  --shadow-step:       1px 1px 0 #000,2px 2px 0 #000,3px 3px 0 #000,4px 4px 0 #000,5px 5px 0 #000,6px 6px 0 #000;
  --shadow-step-hover: 1px 1px 0 #000,2px 2px 0 #000,3px 3px 0 #000,4px 4px 0 #000;
}

@media (max-width: 719px) {
  :root { --sp-40: 28px; --sp-48: 32px; --sp-72: 44px; --sp-80: 48px; --sp-96: 56px; --sp-220: 96px; }
}