/* ============================================================
   DESIGN TOKENS — single source of truth.
   Every section/component pulls from these. Do not hardcode
   raw colors, font names, spacing, or radii anywhere else.
   ============================================================ */

:root {
  /* ---- Color ---- */
  /* Variable NAMES are kept from earlier versions so components did not need to change;
     only the values were remapped to the approved palette below. --champagne (the old
     warm accent role) shares Teal Light rather than introducing another hue. The only
     colour outside the palette is the functional form-error red. */
  /* APPROVED PALETTE (five colours only):
       White #FFFFFF        main page background
       Aqua White #DDF3F0   light section backgrounds, subtle accents
       Tropical Teal #008794 primary buttons, links, highlights
       Teal Light #36AFA7   hover states, secondary details
       Deep Teal #075B66    headings, primary text, footer & other dark sections */
  --forest: #075B66;          /* dark sections (footer, appointment, top bar) */
  --navy: #202424;            /* headings: near-black */
  --primary-teal: #008794;
  --light-tint: #DDF3F0;
  --ivory: #FFFFFF;
  --champagne: #36AFA7;
  --teal: #008794;
  --teal-light: #36AFA7;
  --white: #FFFFFF;
  --charcoal: #50595B;        /* body text */

  /* Derived, used sparingly for hover/tint states — not new hues */
  --navy-soft: rgba(7, 91, 102, 0.06);
  --charcoal-soft: rgba(7, 91, 102, 0.14);
  --teal-soft: #DDF3F0;
  --champagne-soft: rgba(54, 175, 167, 0.35);

  /* ---- Type ---- */
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Manrope', sans-serif;

  /* Type scale (fluid, clamp-based) */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --h3: clamp(1.5rem, 1.1vw + 1.2rem, 1.875rem);
  --h2: clamp(2rem, 2.6vw + 1.3rem, 3rem);
  --h1: clamp(2.25rem, 5.5vw + 1rem, 4.25rem);

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* Section vertical rhythm — standardized across all sections */
  --section-pad-mobile: var(--space-6);
  --section-pad-tablet: var(--space-7);
  --section-pad-desktop: var(--space-8);

  /* Shared container */
  --container-max: 1280px;
  --container-pad-mobile: var(--space-3);
  --container-pad-tablet: var(--space-4);
  --container-pad-desktop: var(--space-6);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-btn: 10px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--charcoal-soft);
  --border-champagne: 1px solid var(--champagne-soft);

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 300ms;
  --dur-med: 600ms;
  --dur-slow: 900ms;

  /* ---- Breakpoints (referenced in comments; media queries below) ----
     mobile:  375px+  (baseline)
     tablet:  768px+
     desktop: 1024px+
     wide:    1280px+
  */
}