/* =====================================================================
   EVOLVIX PHYSIOTHERAPY CLINIC — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Every other stylesheet should reference these variables, not raw values.
   ===================================================================== */
:root {
  /* ---------- COLOR: BRAND ---------- */
  --color-navy-deep:   #0a1329; /* Darkest luxury navy (for hero background overlays and footers) */
  --color-navy:        #0f172a; /* Deep Slate-900/Navy (used for headings and titles) */
  --color-navy-light:  #073B8A; /* Royal Navy (primary brand blue accents & active states) */
  --color-navy-soft:   #0B5ED7; /* Royal Blue (lighter brand accent) */
  --color-gold-deep:   #B8942D; /* Dark metallic gold */
  --color-gold:        #D4AF37; /* Primary metallic gold */
  --color-gold-light:  #E8C766; /* Light gold */
  --color-gold-pale:   #F5D970; /* Very light gold */

  /* ---------- COLOR: SURFACE ---------- */
  --color-bg:           #ffffff;
  --color-bg-soft:      #f0f6ff; /* Soft ice blue bg */
  --color-bg-soft-alt:  #e5e7eb; /* Slate 200 */

  /* ---------- COLOR: TEXT ---------- */
  --color-text:         #334155; /* Slate 700 (premium body text color) */
  --color-text-muted:   #475569; /* Slate 600 */
  --color-text-faint:   #94a3b8; /* Slate 400 */
  --color-text-on-navy: #f8fafc; /* Slate 50 */
  --color-text-on-gold: #0f172a; /* Slate 900 */

  /* ---------- COLOR: UTILITY ---------- */
  --color-white:    #ffffff;
  --color-border:   #e2e8f0; /* Slate 200 */
  --color-border-strong: #cbd5e1; /* Slate 300 */
  --color-success:  #10b981; /* Emerald 500 */
  --color-success-bg: rgba(16, 185, 129, 0.08);
  --color-danger:   #ef4444; /* Red 500 */
  --color-danger-bg: rgba(239, 68, 68, 0.08);
  --color-info:     #3b82f6; /* Blue 500 */

  /* ---------- GRADIENTS ---------- */
  --gradient-navy-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%);
  --gradient-navy-deep:    linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%);
  --gradient-gold-line:    linear-gradient(90deg, var(--color-gold-deep) 0%, var(--color-gold-light) 100%);
  --gradient-gold-sheen:   linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  --gradient-gold-text:    linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-deep) 100%);
  --gradient-premium-glow: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
  --gradient-soft-glow:    radial-gradient(circle, rgba(11, 94, 215, 0.05) 0%, rgba(255, 255, 255, 0) 70%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Inter', sans-serif; /* Set heading to bold sans-serif */
  --font-accent: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.2rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.6vw + 1rem, 2rem);
  --fs-h4: 1.3rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.8125rem;
  --lh-heading: 1.1;
  --lh-body: 1.7;

  /* ---------- SPACING SCALE ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --section-padding-y: clamp(5rem, 8vw, 8rem); /* Generous premium spacing */

  /* ---------- RADIUS ---------- */
  --radius-card: 24px; /* Premium larger border radius */
  --radius-card-lg: 32px;
  --radius-btn: 999px; /* Capsule buttons */
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* ---------- SHADOW (premium glass/solid shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 4px 30px rgba(15, 23, 42, 0.03), 0 10px 40px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.02);
  --shadow-header: 0 4px 30px rgba(15, 23, 42, 0.03);
  --shadow-btn-gold: 0 10px 25px rgba(214, 175, 55, 0.25);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.6s;

  /* ---------- LAYOUT ---------- */
  --header-height: 88px;
  --header-height-scrolled: 72px;
  --container-max: 1280px;

  /* ---------- LEGACY ALIASES ---------- */
  --color-gold-deep-legacy: var(--color-gold-deep);
}

/* Respect reduced motion preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}