/* ============================================================
   WellServe — variables.css
   Design tokens only. No selectors, no component rules.
   Change the brand here; nothing else should need to change.
   ============================================================ */

:root{
  /* ---- Brand palette ---- */
  --navy: #1A2332;
  --navy-soft: #243049;
  --teal: #2A9D8F;
  --teal-dark: #218075;
  --amber: #E9A820;
  --cream: #FAF8F4;
  --paper: #FFFFFF;
  --ink: #1A2332;
  --ink-muted: #5B6472;
  --rule: #E4DFD4;
  --rule-dark: rgba(255,255,255,0.14);

  /* ---- Semantic aliases (use these in new components) ---- */
  --color-primary: var(--teal);
  --color-primary-dark: var(--teal-dark);
  --color-secondary: var(--amber);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-background: var(--cream);
  --color-surface: var(--paper);
  --color-border: var(--rule);
  --color-success: var(--teal);
  --color-inverse: #FFFFFF;
  --color-inverse-muted: rgba(255,255,255,0.75);

  /* ---- Type families ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-display:   clamp(2.8rem, 6vw, 4.6rem);
  --fs-heading-xl:clamp(2.3rem, 5vw, 3.4rem);
  --fs-heading-l: clamp(1.9rem, 3.6vw, 2.7rem);
  --fs-heading-m: clamp(1.6rem, 3vw, 2.2rem);
  --fs-heading-s: 1.25rem;
  --fs-body-lg:   1.15rem;
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-caption:   .75rem;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Layout ---- */
  --max: 1140px;
  --max-sm: 640px;
  --max-md: 860px;
  --max-lg: 1140px;

  /* ---- Radius ---- */
  --radius-small: 6px;
  --radius: 10px;
  --radius-large: 16px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px -2px rgba(26,35,50,0.12);
  --shadow: 0 10px 30px -12px rgba(26,35,50,0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --duration: .18s;
}

/* ---- Breakpoints (reference only — CSS vars can't drive @media,
   these values are the literal numbers used in responsive.css) ----
   --bp-laptop: 1200px
   --bp-tablet: 900px
   --bp-mobile: 600px
*/