/* ==========================================================
   Linden Grove Consulting - DESIGN TOKENS (single source of truth)
   Colors measured from the logo: green #122218, gold ~#BEAF91.
   Change a value here and the whole site updates.
   Documented in brand/brand-guide.md - keep the two in sync.
   ========================================================== */
:root {
  /* Brand colors */
  --color-green-900: #0C1812;   /* footer, deepest */
  --color-green-800: #122218;   /* PRIMARY - matches logo background */
  --color-green-700: #1B3326;   /* raised panels on green */
  --color-gold-300:  #E4D9BF;   /* light gold - headings on green */
  --color-gold-500:  #BEAF91;   /* PRIMARY ACCENT - matches logo gold */
  --color-gold-700:  #7A6638;   /* dark gold - accents/text on light backgrounds */

  /* Neutrals */
  --color-ivory:     #F7F4EC;   /* light page background */
  --color-white:     #FFFFFF;
  --color-ink:       #1A2A21;   /* body text on light */
  --color-ink-muted: #4A5A50;   /* secondary text on light */
  --color-line:      #DDD6C4;   /* hairlines on light */

  /* Typography */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --weight-heading: 600;
  --weight-body: 400;
  --weight-strong: 600;

  /* Type scale */
  --text-small: 0.875rem;                          /* 14px */
  --text-body:  1.0625rem;                         /* 17px */
  --text-lead:  1.25rem;                           /* 20px */
  --text-h3:    1.5rem;                            /* 24px */
  --text-h2:    clamp(2rem, 3.5vw + 1rem, 2.75rem);  /* 32-44px */
  --text-h1:    clamp(2.5rem, 5vw + 1rem, 4rem);     /* 40-64px */
  --leading-body: 1.65;
  --leading-heading: 1.15;
  --tracking-caps: 0.14em;                         /* small uppercase labels */

  /* Spacing (8px base) */
  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2rem;    --space-5: 3rem;  --space-6: 5rem;  --space-7: 7rem;

  /* Shape */
  --radius: 4px;
  --shadow: 0 6px 24px rgba(18, 34, 24, 0.12);
  --max-width: 1120px;

  /* Breakpoints (used as literals in media queries): 640px, 960px */
}