/* =============================================================================
   ZenSleepZone — Global Design Tokens
   File: css/zsz-tokens.css
   Loaded: functions.php (all pages)
   Purpose: Single source of truth. NO styles here — vars & animations only.
   ============================================================================= */

/* ─── COLOUR PALETTE ─── */
:root {
  /* Brand primaries */
  --zsz-primary:       #667eea;
  --zsz-primary-dk:    #5a67d8;
  --zsz-secondary:     #764ba2;
  --zsz-accent:        #f093fb;

  /* Gradients */
  --zsz-grad:          linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --zsz-grad-full:     linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --zsz-grad-sleep:    linear-gradient(135deg, #4a90e2 0%, #2c5aa0 100%);

  /* Text */
  --zsz-t1:   #1a202c;
  --zsz-t2:   #4a5568;
  --zsz-t3:   #718096;
  --zsz-t4:   #a0aec0;

  /* Backgrounds */
  --zsz-bg:       #f7fafc;
  --zsz-bg-white: #ffffff;
  --zsz-bg-card:  #ffffff;
  --zsz-border:   #e2e8f0;

  /* Shadows */
  --zsz-sh-sm: 0 1px 4px rgba(13,27,42,.06);
  --zsz-sh:    0 4px 20px rgba(0,0,0,.08);
  --zsz-sh-md: 0 10px 25px -5px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --zsz-sh-lg: 0 20px 50px rgba(0,0,0,.15);
  --zsz-sh-xl: 0 25px 50px -12px rgba(0,0,0,.25);

  /* Radii */
  --zsz-r-sm: 8px;
  --zsz-r:    16px;
  --zsz-r-lg: 20px;
  --zsz-r-xl: 24px;

  /* Transitions */
  --zsz-ease: .3s cubic-bezier(.4,0,.2,1);
  --zsz-ease-fast: .18s ease;

  /* Typography scale (fluid) */
  --zsz-text-xs:   clamp(.78rem,.74rem + .12vw,.84rem);
  --zsz-text-sm:   clamp(.92rem,.88rem + .16vw,1rem);
  --zsz-text-base: clamp(1.06rem,1rem + .22vw,1.18rem);
  --zsz-text-md:   clamp(1.18rem,1.1rem + .28vw,1.32rem);
  --zsz-text-lg:   clamp(1.32rem,1.22rem + .36vw,1.5rem);
  --zsz-text-xl:   clamp(1.5rem,1.36rem + .52vw,1.8rem);
  --zsz-text-2xl:  clamp(1.8rem,1.58rem + .75vw,2.2rem);
  --zsz-text-3xl:  clamp(2.15rem,1.85rem + 1vw,2.75rem);

  /* Layout */
  --zsz-max-w: 1200px;
  --zsz-max-w-wide: 1380px;
  --zsz-max-w-article: 860px;
  --zsz-sidebar-w: 295px;
}

/* ─── PILLAR COLOUR MAP ─── */
/* Each pillar injects its own --pillar-* vars into .zen.zen--[slug] */
.zen.zen--disorders     { --pillar-color:#6366f1; --pillar-dark:#4338ca; --pillar-light:#ede9fe; --pillar-grad:linear-gradient(135deg,#6366f1,#4338ca); }
.zen.zen--science       { --pillar-color:#3b82f6; --pillar-dark:#1d4ed8; --pillar-light:#eff6ff; --pillar-grad:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.zen.zen--solutions     { --pillar-color:#10b981; --pillar-dark:#047857; --pillar-light:#d1fae5; --pillar-grad:linear-gradient(135deg,#10b981,#047857); }
.zen.zen--environment   { --pillar-color:#f59e0b; --pillar-dark:#b45309; --pillar-light:#fef3c7; --pillar-grad:linear-gradient(135deg,#f59e0b,#b45309); }
.zen.zen--optimization  { --pillar-color:#8b5cf6; --pillar-dark:#6d28d9; --pillar-light:#ede9fe; --pillar-grad:linear-gradient(135deg,#8b5cf6,#6d28d9); }
.zen.zen--mental-health { --pillar-color:#ec4899; --pillar-dark:#be185d; --pillar-light:#fce7f3; --pillar-grad:linear-gradient(135deg,#ec4899,#be185d); }
.zen.zen--life-stages   { --pillar-color:#14b8a6; --pillar-dark:#0f766e; --pillar-light:#ccfbf1; --pillar-grad:linear-gradient(135deg,#14b8a6,#0f766e); }
.zen.zen--spirituality  { --pillar-color:#a78bfa; --pillar-dark:#7c3aed; --pillar-light:#ede9fe; --pillar-grad:linear-gradient(135deg,#a78bfa,#7c3aed); }
.zen.zen--answers       { --pillar-color:#06b6d4; --pillar-dark:#0e7490; --pillar-light:#ecfeff; --pillar-grad:linear-gradient(135deg,#667eea,#764ba2); }

/* ─── SHARED ANIMATIONS ─── */
@keyframes zsz-fade-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes zsz-breathe {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.05); }
}
@keyframes zsz-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
@keyframes zsz-pulse-ring {
  0%   { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.2); }
}
@keyframes zsz-shimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}
@keyframes zsz-star-drift {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-100px); }
}

/* ─── ACCESSIBILITY ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Focus ring — consistent site-wide */
:focus-visible {
  outline: 2px solid var(--zsz-primary);
  outline-offset: 3px;
}