/* ============================================================
   Pure Massage — Color Variables
   Palette taken directly from the Adobe XD design.
   ============================================================ */

:root {

  /* Base */
  --color-white: #FFFFFF;

  /* Teal — brand accent (primary CTA, nav/link hover, mobile menu panel bg) */
  --color-teal-900: #0E7F8F;
  --color-teal-500: #64C7C8;
  --color-teal-200: #ADF0F0;
  --color-teal-100: #E7F7F7;
  --color-teal-50:  #F3FBFB;

  /* Terracotta — secondary CTA accent */
  --color-terracotta: #D97962;

  /* Warm neutrals (cream backgrounds) */
  --color-cream-200: #E3DED4;
  --color-cream-100: #E7E6DD;
  --color-cream-50:  #F5F1EB;

  /* Grays (text) */
  --color-ink:      #333333; /* section headings */
  --color-text:     #4A4A4A; /* body text */
  --color-gray-600: #6E6E6E;
  --color-gray-700: #5E6060;

  /* Overlays */
  --color-black-a07: #00000012;

  /* Semantic aliases */
  --color-primary:      var(--color-teal-900); /* brand teal accent — mobile menu panel bg, skip link, dropdown hover */
  --color-header-bg:    var(--color-white);
  --color-footer-bg:    var(--color-teal-50);
  --color-cta:          var(--color-teal-900);   /* primary button — used on the header/footer */
  --color-cta-alt:      var(--color-terracotta); /* secondary button — used on white/cream sections */
  --color-heading:      var(--color-ink);
  --color-heading-inverse: var(--color-white);
  --color-background:  var(--color-white);

  /* Fonts */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* Semibold (600) — section headings */
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Regular (400) — body copy, Bold (700) — small headings */

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

}