:root {
  --color-bg:        #FFF9DD; /* Bavarian Cream — primary page bg */
  --color-bg-alt:    #F2E7C0; /* deeper warm cream — alternating sections, reads distinct from --color-bg */
  --color-surface:   #FFFFFF;
  --color-fg:        #2A2A2A; /* charcoal — carries ALL text */
  --color-fg-muted:  #6B6459;
  --color-accent:    #EFDC75; /* Yellow Cream — large fills/highlights only */
  --color-gold:      #BFA046; /* restrained gold — hairlines, underlines, icons */
  --color-gold-rgb:  191, 160, 70; /* for rgba() hairlines at partial opacity */
  --color-bg-deep:      #24242A; /* charcoal color-block section (testimonials) */
  --color-on-deep:      #F7F1DE; /* warm cream text on --color-bg-deep */
  --color-on-deep-muted: rgba(247, 241, 222, 0.68);
  --ss-pink:         #EC008C; /* Shade Symphonies page ONLY */
  --ss-black:        #0A0A0A;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --maxw: 1200px;
  --header-h: 80px; /* measured .site-header height, same at every viewport */
  --ar-portrait:  4 / 5;  /* portrait image slots: service rows, cards, before/after */
  --ar-landscape: 3 / 2;  /* landscape/editorial slots: approach items, wide bento tiles */
  --measure: 65ch;

  /* Fluid type scale: mobile size rises smoothly to the desktop size, then holds.
     Body caps at ~18px so running text never reads oversized; sub-headers scale
     with more range so they stay clearly larger than body at every width. */
  --fs-body:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);    /* 16px -> 18px */
  --fs-eyebrow: 0.78rem;                                    /* fixed, tracked uppercase */
  --fs-hero:    clamp(2.75rem, 2.02rem + 3.11vw, 5.75rem);  /* 44px -> 92px */
  --fs-h1:      clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);    /* 36px -> 60px */
  --fs-h2:      clamp(1.8rem, 1.4rem + 2vw, 3rem);          /* 28.8px -> 48px */
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);     /* 20.8px -> 28px */
  --fs-h4:      clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);     /* 17.6px -> 20.8px */
}