/* =========================================================
   BOLI CARE · DESIGN TOKENS
   Single source of truth for colors, type, spacing, motion.
   ========================================================= */

:root {
  /* ─── Color · Ink & paper ─── */
  --ink:          #0d1a14;   /* titles, strong text */
  --ink-soft:     #26342c;   /* body */
  --ink-muted:    #5c6b64;   /* secondary / meta */
  --ink-faint:    #9aa49f;   /* disabled / hints */

  --paper:        #fbfaf6;   /* main bg */
  --paper-2:      #f5f1e6;   /* alternate bg */
  --cream:        #ece5d4;   /* chips, soft accents */
  --rule:         #e4ddc9;   /* borders */
  --rule-soft:    #efe9d9;

  /* ─── Color · Brand accents ─── */
  --green:        #0d5b3f;   /* deep brand green: trust, clinical */
  --green-700:    #0a4731;
  --green-50:     #e7efe9;
  --green-ink:    #0b3426;   /* immersive bg (final CTA, dark strips) */
  --green-ink-2:  #123e2c;

  --brand-green:  #009646;   /* vivid logo green: patient hero accent */
  --brand-green-soft: #2eb168;
  --brand-green-50:   #e3f5ec;

  /* Warm patient accent - used sparingly (small emotional touches) */
  --coral:        #e35d3c;
  --coral-deep:   #c8543a;
  --coral-50:     #fbe9e2;
  --coral-100:    #f7d3c5;
  --peach:        #f3a682;
  --apricot:      #fbd9b0;

  --gold:         #d4942a;   /* scientific accent (physicians) */
  --gold-soft:    #e7b864;
  --honey:        #f0c879;

  --sky:          #6ba3b3;
  --sky-50:       #e3eef0;

  /* ─── Background · "alive" gradient wash · GREEN-DOMINANT for patient ─── */
  --bg-wash: radial-gradient(1200px 800px at 10% 0%, #d8eede 0%, transparent 60%),
             radial-gradient(1000px 700px at 92% 28%, #fbe8d0 0%, transparent 55%),
             radial-gradient(900px 800px at 50% 100%, #eaf3e0 0%, transparent 60%),
             radial-gradient(700px 600px at 28% 60%, #e7efe9 0%, transparent 55%),
             var(--paper);

  /* ─── Typography ─── */
  --font-head:    'Lora', 'Times New Roman', Georgia, serif;
  --font-body:    'Afacad', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display:   clamp(2.6rem, 6vw, 5.2rem);
  --fs-title:     clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3:        clamp(1.3rem, 2vw, 1.6rem);
  --fs-lede:      clamp(1.05rem, 1.1vw, 1.22rem);
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-eyebrow:   11px;

  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-base:      1.6;
  --lh-loose:     1.7;

  --tr-tight:     -.025em;
  --tr-snug:      -.018em;
  --tr-wide:      .04em;
  --tr-eyebrow:   .22em;

  /* ─── Spacing · 8px grid ─── */
  --sp-1:         4px;
  --sp-2:         8px;
  --sp-3:         12px;
  --sp-4:         16px;
  --sp-5:         24px;
  --sp-6:         32px;
  --sp-7:         48px;
  --sp-8:         64px;
  --sp-9:         96px;
  --sp-10:        128px;

  /* Section rhythm - tighter, intentional */
  --sp-section:   clamp(52px, 6vw, 96px);

  /* ─── Layout ─── */
  --max-w:        1240px;
  --max-w-narrow: 960px;
  --max-w-prose:  720px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --radius-xl:    20px;

  /* ─── Shadows ─── */
  --shadow-sm:    0 2px 8px -2px rgba(13,26,20,.08);
  --shadow:       0 14px 40px -20px rgba(13,26,20,.18);
  --shadow-lg:    0 40px 80px -30px rgba(13,26,20,.25);

  /* ─── Motion ─── */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --ease-in-out:  cubic-bezier(.65,.05,.36,1);

  --dur-fast:     200ms;
  --dur-base:     320ms;
  --dur-slow:     600ms;
  --dur-reveal:   900ms;

  /* ─── Z-index ─── */
  --z-base:       1;
  --z-header:     50;
  --z-dropdown:   60;
  --z-modal:      100;
  --z-toast:      200;
  --z-grain:      999;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}