/* ============================================================
   Parkwellness — Color Variables
   Ordered light → dark within each family (100 = lightest).
   ============================================================ */

:root {

  /* Cream / off-white (backgrounds) */
  --color-cream-50:  #FFFFFF;
  --color-cream-100: #F8F8F8;
  --color-cream-150: #FCF8F0;
  --color-cream-200: #F2E9DA;
  --color-cream-250: #F0E9DC;
  --color-cream-300: #E7E6DD;
  --color-cream-350: #E3DED4;
  --color-cream-400: #E2D7BF;

  /* Taupe / warm gray (muted text, borders, dividers) */
  --color-taupe-100: #CEC6B8;
  --color-taupe-200: #CBC4B8;
  --color-taupe-300: #C0BAAE;
  --color-taupe-400: #BCB5AA;
  --color-taupe-500: #B1AA9F;
  --color-taupe-600: #948E85;

  /* Gold / bronze (brand accent, CTAs, highlights) */
  --color-gold-100: #E1CC96;
  --color-gold-200: #CEB074;
  --color-gold-300: #D4AF6A;
  --color-gold-400: #B8A688;
  --color-gold-500: #BC9C5F;
  --color-gold-600: #866732;
  --color-gold-700: #57492E;

  /* Dark / near-black (text, dark backgrounds) */
  --color-dark-100: #534F4A;
  --color-dark-200: #3C3732;
  --color-dark-300: #333333;
  --color-dark-400: #32302C;
  --color-dark-500: #1E1A16;
  --color-dark-600: #13110E;
  --color-dark-700: #0F0D0A;
  --color-dark-800: #0A0908;
  --color-dark-900: #000000;

  /* Overlays (alpha) */
  --overlay-dark-85: #242424D9; /* ~85% opacity — dark scrims over images */
  --overlay-black-16: #00000029; /* ~16% opacity — subtle shadows/tints */
  --overlay-black-60: #00000099; /* ~60% opacity, pure black — hero slideshow scrim, a bit lighter than the Contrology section's overlay-black-70 */
  --overlay-black-70: #000000B3; /* ~70% opacity — header over the hero slideshow, and the Contrology section's background-photo scrim */
  --overlay-black-80: #000000CC; /* ~80% opacity, pure black — darker read than overlay-dark-85 despite the lower alpha, since #242424 is a gray, not true black */

  /* Semantic aliases — safe defaults for now; specific sections (header
     background, CTA color, etc.) get wired to the exact shade above as
     each one is built and confirmed. */
  --color-white: var(--color-cream-50);
  --color-black: var(--color-dark-900);
  --color-background: var(--color-white);
  --color-text: var(--color-dark-900);

  /* Typography (Google Fonts — see functions.php for the enqueue)
     --font-heading → Playfair Display, Regular (400) — h1–h6
     --font-body    → Jost, Regular (400) body copy / Medium (500) small headings
     --font-accent  → Oswald, Regular (400) — quotes / stand-out text
  */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Jost', sans-serif;
  --font-accent: 'Oswald', sans-serif;

  /* Layout */
  --header-height: clamp(70px, 7vw, 90px);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

}