/* ============================================================
   ASPIRE NATUROPATHIC MEDICINE — DESIGN TOKENS
   Core design system: color, type, space, motion, elevation.
   ============================================================ */

:root {
  /* ---- Brand colors (from logo + brand sheet) ---- */
  --navy-900: #0D1B2A;   /* Dark Anchor */
  --navy-800: #14243D;
  --navy-700: #1B2D4F;   /* Deep Navy — primary */
  --navy-600: #26395C;
  --navy-500: #34486E;

  --gold-700: #9C7429;
  --gold-600: #B3822E;
  --gold-500: #C9973A;   /* Warm Gold — primary accent */
  --gold-400: #D9AF5C;
  --gold-300: #E8C989;
  --gold-200: #F2DFB2;

  --blue-600: #6E93A8;
  --blue-500: #A8C4D4;   /* Soft Blue */
  --blue-300: #C9DBE4;
  --blue-100: #EDF3F6;

  --cream-300: #EFE6D6;
  --cream-100: #F7F3EC;  /* Cream */
  --cream-50:  #FBF8F3;

  --white: #FFFFFF;

  /* ---- Semantic tokens ---- */
  --color-bg-page: var(--white);
  --color-bg-section-alt: var(--cream-100);
  --color-bg-dark: var(--navy-700);
  --color-bg-darker: var(--navy-900);

  --color-text-heading: var(--navy-800);
  --color-text-body: #3C4658;
  --color-text-muted: #6B7488;
  --color-text-on-dark: var(--cream-50);
  --color-text-on-dark-muted: var(--blue-300);
  --color-text-accent: var(--gold-600);

  --color-border: rgba(27, 45, 79, 0.10);
  --color-border-on-dark: rgba(247, 243, 236, 0.16);

  --color-focus-ring: var(--gold-500);

  /* ---- Typography ---- */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  --fs-3xl: clamp(2.5rem, 1.9rem + 2.8vw, 4rem);
  --fs-4xl: clamp(3rem, 2.1rem + 4vw, 5.2rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-pad-y: clamp(4rem, 3rem + 4vw, 8rem);
  --container-w: 1200px;
  --container-w-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(13, 27, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(13, 27, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(13, 27, 42, 0.16);
  --shadow-gold: 0 10px 28px rgba(201, 151, 58, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  --nav-height: 84px;
  --nav-height-scrolled: 68px;
}