/* =============================================================
 * tokens.css — Jey Zdravye Design Tokens
 * Shared by all health.jeyai.ai page templates.
 *
 * Design decision: Dark hero + warm-light content body.
 *   - Medical content (article body, reference cards) uses warm
 *     #faf9f7 background to signal clinical trust (Healthline /
 *     Mayo convention), satisfying E-E-A-T for YMYL pages.
 *   - Navigation, hero and CTA bands retain JeyAI Golden Dark
 *     brand palette for identity consistency.
 *   - Golden accent #F7B500 on Dark #0D0D0D: 8.02:1 (passes AA
 *     and AAA for both large and body text).
 *   - Body text #18181b on warm #faf9f7: 17.25:1 (passes AAA).
 * ============================================================= */

:root {
  /* --- JeyAI Brand (dark surfaces) --- */
  --jy-bg-primary:    #0D0D0D;
  --jy-bg-secondary:  #161616;
  --jy-bg-card:       #1a1a1a;
  --jy-bg-elevated:   #27272a;
  --jy-accent:        #F7B500;
  --jy-accent-hover:  #D4A017;
  --jy-accent-light:  #FFD54F;
  --jy-accent-bg:     rgba(247, 181, 0, 0.10);
  --jy-accent-subtle: rgba(247, 181, 0, 0.14);
  --jy-text-on-accent:#000000;
  --jy-text-primary:  #fafafa;
  --jy-text-secondary:#9CA3AF;
  --jy-text-tertiary: #6B7280;
  --jy-border:        rgba(255, 255, 255, 0.07);
  --jy-border-hover:  rgba(255, 255, 255, 0.11);

  /* --- Warm light palette (medical article body) --- */
  --warm-bg:      #faf9f7;
  --warm-card:    #ffffff;
  --warm-border:  #e8e4dc;
  --warm-divider: #ece9e1;
  --warm-text:    #18181b;
  --warm-text-2:  #3f3f46;
  --warm-text-3:  #71717a;

  /* --- Semantic status colors --- */
  --color-green:  #16a34a;
  --color-green-bg: #f0fdf4;
  --color-green-border: #bbf7d0;
  --color-amber:  #b45309;
  --color-amber-bg: #fffbeb;
  --color-amber-border: #fde68a;
  --color-amber-dark: #92400e;
  --color-amber-dark-bg: #fff7ed;
  --color-amber-dark-border: #fed7aa;
  --color-red:    #b91c1c;
  --color-red-bg: #fef2f2;
  --color-red-border: #fecaca;
  --color-red-text: #991b1b;

  /* --- Typography --- */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* --- Font sizes (fluid via clamp) --- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  clamp(20px, 2.5vw, 24px);
  --text-3xl:  clamp(24px, 3vw, 30px);
  --text-4xl:  clamp(28px, 4vw, 36px);
  --text-5xl:  clamp(32px, 5vw, 48px);

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- Border radii --- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

  /* --- Layout --- */
  --container:        1200px;
  --container-narrow:  800px;
  --container-article: 720px;
}