/* ==========================================================================
   CSS Design System — Move As You Should
   All brand tokens as CSS custom properties on :root.
   Changing a variable here changes the entire site.
   ========================================================================== */

:root {

  /* === BRAND COLORS === */
  --color-primary: #C67B4D;          /* Terracotta — buttons, links, action elements */
  --color-primary-dark: #A8653D;     /* Terracotta hover/active — ~15% darker */
  --color-secondary: #8B9E7A;        /* Sage green — accents, dividers, card borders */
  --color-background: #FAF6F1;       /* Warm cream — page background */
  --color-surface: #FFFFFF;          /* White — cards, surfaces */
  --color-text: #3D3228;             /* Warm brown — primary body text */
  --color-text-light: #6B5E52;       /* Lighter warm brown — secondary/muted text */
  --color-accent: #D4A86A;           /* Golden sand — decorative accents */
  --color-footer-bg: #3D3228;        /* Warm brown — footer background */
  --color-footer-text: #FAF6F1;      /* Cream — footer text */

  /* === SPECIALTY TINTS === */
  /* Subtle background shifts for service pages — barely noticeable shifts from cream */
  --color-tint-ortho: #FDF0E8;       /* Warm peach — orthopedic/sports pages */
  --color-tint-peds: #EFF5EC;        /* Soft green — pediatric pages */
  --color-tint-pelvic: #F0EDF5;      /* Soft lavender — pelvic floor pages */
  --color-tint-sand: #F5EADC;        /* Golden sand tint — home intro band */

  /* === SPECIALTY ACCENTS (stronger than tints, for borders and icons) === */
  --color-accent-peds: #5E7A4E;      /* Deep sage */
  --color-accent-pelvic: #7A6699;    /* Deep lavender */
  --color-accent-ortho: #C67B4D;     /* Terracotta */

  /* === DECORATION === */
  --wave-height: 3rem;
  --icon-circle-size: 4rem;

  /* === VALUE BADGES (stronger than tints so the pills read as color) === */
  --color-badge-sage: #DCE8D4;
  --color-badge-peach: #F2D4C2;
  --color-badge-lavender: #E4DDF0;
  --radius-pill: 999px;

  /* === TYPOGRAPHY === */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --line-height-body: 1.65;
  --line-height-heading: 1.3;

  /* Font size scale (rem-based) */
  --font-size-sm: 0.875rem;          /* 14px */
  --font-size-base: 1rem;            /* 16px */
  --font-size-md: 1.125rem;          /* 18px */
  --font-size-lg: 1.25rem;           /* 20px */
  --font-size-xl: 1.5rem;            /* 24px */
  --font-size-2xl: 2rem;             /* 32px */
  --font-size-3xl: 2.5rem;           /* 40px */

  /* === SPACING SCALE (8px base grid) === */
  --space-xs: 0.25rem;               /* 4px */
  --space-sm: 0.5rem;                /* 8px */
  --space-md: 1rem;                  /* 16px */
  --space-lg: 1.5rem;                /* 24px */
  --space-xl: 2rem;                  /* 32px */
  --space-2xl: 3rem;                 /* 48px */
  --space-3xl: 4rem;                 /* 64px */
  --space-4xl: 5rem;                 /* 80px */
  --space-5xl: 6.25rem;              /* 100px */

  /* === LAYOUT === */
  --content-width: 50rem;            /* ~800px — text content max width */
  --container-width: 75rem;          /* ~1200px — outer container max width */
  --content-padding: var(--space-md); /* 16px mobile, scales up via media queries */

  /* === COMPONENTS === */
  --border-radius: 0.5rem;           /* 8px — buttons */
  --border-radius-lg: 0.75rem;       /* 12px — cards */
  --intro-photo-size: 12.5rem;       /* 200px — home page headshot */
  --card-border: 1px solid var(--color-secondary); /* Sage border on cards */
  --transition-speed: 200ms;

  /* === HEADER === */
  --header-height: 4rem;             /* 64px */
}