:root {
  --sticky-col-1-width: 52px;

  /* ─── Colors ─────────────────────────────── */

  /* Brand — Accent Primary (from Build_Instructions.md + GHL-notes §16) */
  --color-primary:        #772A1C; /* CONFIRMED — matches live Squarespace --accent-hsl (9.23,61.9%,28.82%) exactly. CTAs, links, brand highlight */
  --color-primary-hover:  #5E2015; /* tc2 — tested hover state */
  --color-primary-active: #4A190F; /* NOT in source docs — extrapolated, confirm visually */

  /* Brand — Secondary: none defined in brand kit. Aliased to primary per decision. */
  --color-secondary:        var(--color-primary);
  --color-secondary-hover:  var(--color-primary-hover);
  --color-secondary-active: var(--color-primary-active);

  /* Accent Light — subtle accents on dark backgrounds */
  --color-primary-light: #9B3D2D; /* tc3 */

  /* Backgrounds — light theme (was dark theme in source file) */
  --color-bg-page:    #F5F5F5; /* CONFIRMED — matches live Squarespace --white-hsl (0,0%,96.08%) exactly */
  --color-bg-section: #E9E5E1; /* CONFIRMED — matches live Squarespace --lightAccent-hsl (30,15.38%,89.8%) exactly */
  --color-bg-cream:   #FAF7F3; /* crm — lightest, extra tier for card fills etc. */
  --color-bg-warm:    #F5F1EC; /* wwh — extra tier, NOTE: close but not identical to --color-bg-page, see flag below */
  --color-bg-tint:    #EDE4D4; /* snl — section light fill, card borders */
  --color-surface:    #E9E5E1;

  /* Backgrounds — dark sections (e.g. dark CTA banners) */
  --color-bg-dark:   #3A271A; /* esp — also doubles as body text color */
  --color-bg-dark-2: #5E2015; /* tc2 reused for dark-on-dark contrast if needed */

  /* Text — on light backgrounds */
  --color-text-primary:   #772A1C; /* CONFIRMED — matches live Squarespace --darkAccent-hsl (24.38,38.1%,16.47%) exactly. Body/heading text */
  --color-text-secondary: #896F5A; /* brn — UNRESOLVED: Build_Instructions.md proposes #7D7461 instead, pending client confirmation. Using GHL-notes value for now. */
  --color-text-disabled:  #AEA38F; /* CONFIRMED — matches live Squarespace --black-hsl (38.71,16.06%,62.16%) exactly. WCAG-exempt for disabled/inactive controls only; do NOT use for default secondary text (fails AA) */
  --color-text-dark:      #000000; /* rarely needed now that primary text is already dark; kept for edge cases */

  /* Text — on dark backgrounds (new — source theme didn't need this, whole theme was dark) */
  --color-text-on-dark:          #FAF7F3; /* crm */
  --color-text-on-dark-emphasis: #E0CAAC; /* snd — emphasis text, stat numbers on dark bg */

  /* Borders */
  --color-border:          rgba(58, 39, 26, 0.09); /* esp-based, was white-based in source (dark theme) */
  --color-border-on-dark:  rgba(250, 247, 243, 0.25);
  --color-border-focus:    #772A1C;
  --color-border-error:    #EF4444;
  --color-border-tertiary: rgba(58, 39, 26, 0.05);
  --color-border-muted:    #AEA38F; /* tau — safe here, this role is borders/dividers only per Build_Instructions.md */

  /* Status — generic UI states, not defined in brand kit, kept as-is */
  --color-success:  #10B981;
  --color-error:    #EF4444;
  --color-warning:  #F59E0B;
  --color-caution:  #F97316;
  --color-info:     #3B82F6;

  /* ─── Typography ─────────────────────────── */

  /* Fonts — per Build_Instructions.md Typography Guide */
  /* NOTE: live Squarespace site still loads 'DM Serif Display' via @font-face — CONFIRMED this is
     a deprecated legacy font no longer in use, not the current brand heading font. Do not carry it over. */
  /* Both fonts need real bold + italic weights loaded (not browser-faked) — e.g. via Google Fonts:
     Work Sans: wght@400;500;600;700 + ital variants
     Fraunces:  wght@400;700 + ital variants (Fraunces also supports optical sizing/soft params if needed later) */
  --font-primary:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body + misc/UI — regular, bold, italic all in use */
  --font-display:  'Fraunces', Georgia, serif; /* CONFIRMED current heading font, H1–H6 — regular, bold, italic all in use */
  --font-mono:     'Courier New', monospace; /* not brand-specified, kept as generic utility */

  /* Sizes — already matched Build_Instructions.md spec exactly, unchanged */
  --font-size-tiny:  clamp(0.6875rem, calc(0.67rem + 0.06vw), 0.75rem);   /* 11px → 12px */
  --font-size-small: clamp(0.8125rem, calc(0.79rem + 0.09vw), 0.875rem); /* 13px → 14px */
  --font-size-body:  clamp(1rem, calc(0.97rem + 0.13vw), 1.125rem);      /* 16px → 18px */
  --font-size-lead:  clamp(1rem, calc(0.94rem + 0.31vw), 1.25rem);       /* 16px → 20px */
  --font-size-h6:    clamp(1rem, calc(0.96rem + 0.19vw), 1.125rem);      /* 16px → 18px */
  --font-size-h5:    clamp(1.125rem, calc(1.08rem + 0.19vw), 1.25rem);   /* 18px → 20px */
  --font-size-h4:    clamp(1.25rem, calc(1.16rem + 0.38vw), 1.5rem);     /* 20px → 24px */
  --font-size-h3:    clamp(1.5rem, calc(1.32rem + 0.75vw), 2rem);        /* 24px → 32px */
  --font-size-h2:    clamp(1.75rem, calc(1.49rem + 1.13vw), 2.5rem);     /* 28px → 40px */
  --font-size-h1:    clamp(2.3rem, 6vw, 5.4rem);

  /* Line heights — already matched spec, unchanged */
  --line-height-tight:   1.2;
  --line-height-body:    1.5;
  --line-height-relaxed: 1.6; /* use for optional lead paragraph style (18–20px) */
  --line-height-h1: 1.05;
  --line-height-h2: 1.2;
  --line-height-h3: 1.3;
  --line-height-h4: 1.4;
  --line-height-h5: 1.4;
  --line-height-h6: 1.5;

  /* Weights — not brand-specified beyond standard scale, unchanged */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ─── Spacing ─────────────────────────────── */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ─── Layout wrap widths (from GHL-notes §17 — Reusable Section Shell) ─── */
  --wrap-max-w:        1180px;
  --wrap-narrow-max-w: 660px;
  --wrap-padding-x:    32px;

  /* ─── Borders (radius/width) ─────────────── */
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;
  --border-radius-xl:   16px;
  --border-radius-full: 9999px;

  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  3px;

  /* ─── Shadows — not brand-specified, kept as-is (light-theme shadows are usually softer; revisit if too heavy) ─── */
  --shadow-sm: 0 1px 2px rgba(58, 39, 26, 0.12);
  --shadow-md: 0 4px 6px rgba(58, 39, 26, 0.12);
  --shadow-lg: 0 10px 15px rgba(58, 39, 26, 0.16);
  --shadow-xl: 0 20px 25px rgba(58, 39, 26, 0.20);

  /* ─── Transitions ─────────────────────────── */
  --transition-fast:   150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow:   500ms ease-in-out;

  /* ─── Z-index ─────────────────────────────── */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;

  /* ─── Layout ─────────────────────────────── */
  --nav-h: 64px;
  --max-w: 1280px;

  /* ─── Toggle switch (not brand-specific, unchanged) ────── */
  --toggle-width:          48px;
  --toggle-height:         24px;
  --toggle-knob-size:      18px;
  --toggle-knob-offset:    3px;
  --toggle-travel:         24px;
  --toggle-transition:     0.2s ease;

  --breadcrumb-h: 44.5px;
}