/* ============================================
   MAPLEWOOD ANIMAL HOSPITAL — Design Tokens
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  --color-primary:        #1B6B6D;
  --color-primary-dark:   #134E50;
  --color-primary-light:  #2A8E91;
  --color-primary-subtle: #E8F4F4;

  --color-accent:         #C4573A;
  --color-accent-dark:    #A3452D;
  --color-accent-light:   #D97B63;
  --color-accent-subtle:  #FDF0EC;

  --color-warm-white:     #FAF7F2;
  --color-warm-cream:     #F3EDE4;
  --color-warm-tan:       #E8DFD3;

  --color-text-primary:   #2C2C2C;
  --color-text-secondary: #5A5A5A;
  --color-text-muted:     #8A8A8A;
  --color-text-inverse:   #FAF7F2;

  --color-border:         #E0D9CF;
  --color-border-light:   #EDE8E0;

  --color-overlay-dark:   rgba(19, 44, 45, 0.65);
  --color-overlay-light:  rgba(255, 255, 255, 0.92);

  /* ---- Typography ---- */
  --font-primary:   'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-display:   'Plus Jakarta Sans', -apple-system, sans-serif;

  --fs-display:     clamp(2.8rem, 5.5vw, 4.5rem);
  --fs-h1:          clamp(2.2rem, 4vw, 3.2rem);
  --fs-h2:          clamp(1.8rem, 3vw, 2.5rem);
  --fs-h3:          clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:          1.125rem;
  --fs-body:        1.0625rem;
  --fs-body-sm:     0.9375rem;
  --fs-caption:     0.8125rem;
  --fs-overline:    0.75rem;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-body:        1.7;

  --ls-tight:       -0.02em;
  --ls-normal:      0;
  --ls-wide:        0.06em;
  --ls-wider:       0.12em;

  /* ---- Spacing Scale ---- */
  --space-2xs:      0.25rem;
  --space-xs:       0.5rem;
  --space-sm:       0.75rem;
  --space-md:       1rem;
  --space-lg:       1.5rem;
  --space-xl:       2rem;
  --space-2xl:      3rem;
  --space-3xl:      4.5rem;
  --space-4xl:      6rem;
  --space-5xl:      8rem;
  --space-section:  clamp(5rem, 10vw, 8rem);

  /* ---- Layout ---- */
  --max-width:      1200px;
  --max-width-narrow: 800px;
  --max-width-wide: 1400px;
  --gutter:         clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Borders & Radius ---- */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ---- Shadows ---- */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl:      0 20px 48px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
  --shadow-glow:    0 0 40px rgba(27, 107, 109, 0.15);
  --shadow-accent:  0 4px 20px rgba(196, 87, 58, 0.2);

  /* ---- Transitions ---- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-reveal: 800ms;
}