/* Pharmacology v3 — Design tokens
 * Single source of truth. Every other CSS file consumes these.
 * Never redeclare these inside a page.
 */

:root {
  /* --- Color: navy + mint on neutral paper (brand palette May 2026) ---
   * #324669 navy · #7CB99E mint · #BDAE9B tan · #D8D9CD neutral · #F6F6F6 white
   * Token names kept (--gold etc.) so components.css stays untouched;
   * values now map to the new mint/tan brand.
   */
  --ink:          #324669;
  --ink-soft:     #445782;
  --ink-mute:     #5F6B85;
  --ink-faint:    #9AA3B8;

  --paper:        #FFFFFF;
  --paper-2:      #EEF3F0;
  --paper-3:      #D8D9CD;
  --white:        #FFFFFF;

  /* "gold" tokens are kept by name for codebase stability, but now point
     to the brand mint #7CB99E and its tints — the page reads as navy + mint. */
  --gold:         #7CB99E;
  --gold-soft:    #A4D4BD;
  --gold-pale:    #DFEFE6;
  --gold-deep:    #4A8068;

  /* Optional explicit aliases for future code — same colors, clearer names */
  --mint:         #7CB99E;
  --mint-soft:    #A4D4BD;
  --mint-pale:    #DFEFE6;
  --mint-deep:    #4A8068;
  --tan:          #BDAE9B;
  --tan-soft:     #D8D9CD;
  --navy:         #324669;
  --navy-deep:    #1F2D47;

  --whatsapp:     #25D366;
  --whatsapp-d:   #1FB857;
  --success:      #4A8068;
  --danger:       #B23A30;

  --hair:         rgba(50, 70, 105, 0.12);
  --hair-strong:  rgba(50, 70, 105, 0.22);
  --hair-dark:    rgba(255, 255, 255, 0.14);

  /* --- Type ------------------------------------------------- */
  --font-display: "Alyamama", "Inter Tight", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body:    "Alyamama", "Inter Tight", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-latin:   "Inter Tight", "Alyamama", system-ui, sans-serif;

  --fs-display-1: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
  --fs-display-2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fs-h3:        clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --fs-h4:        clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-lede:      clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-body:      clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem);
  --fs-small:     clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --fs-eyebrow:   0.78rem;

  --lh-display:   1.18;
  --lh-h3:        1.3;
  --lh-lede:      1.55;
  --lh-body:      1.78;
  --lh-tight:     1.2;

  --tracking-eyebrow: 0.14em;
  --tracking-display: 0;

  /* --- Space (8pt grid) ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --section-y: clamp(4rem, 8vw, 7rem);
  --container-max: 76rem;
  --container-narrow: 44rem;
  --container-prose: 38rem;
  --pad-x: clamp(1.1rem, 3vw, 2rem);

  /* --- Radii ------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- Shadow ----------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(50, 70, 105,0.05);
  --shadow-2: 0 6px 16px -8px rgba(50, 70, 105,0.10);
  --shadow-3: 0 18px 36px -18px rgba(50, 70, 105,0.22);
  --shadow-4: 0 30px 60px -22px rgba(50, 70, 105,0.30);
  --shadow-card: 0 1px 0 var(--hair), 0 18px 36px -28px rgba(50, 70, 105,0.16);
  --shadow-lift: 0 1px 0 var(--hair), 0 26px 50px -28px rgba(50, 70, 105,0.26);
  --shadow-inset-hair: inset 0 0 0 1px var(--hair);
  --shadow-gold-glow: 0 8px 24px -12px rgba(124, 185, 158, 0.30);

  /* --- Motion ----------------------------------------------- */
  --dur-instant: 80ms;
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    520ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-step: 80ms;

  /* --- Z ---------------------------------------------------- */
  --z-bg:      0;
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-fab:     300;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   950;

  /* --- Misc ------------------------------------------------- */
  --glass-blur: 14px;
  --nav-h: 72px;
}

/* Comfortable defaults respect a user's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --reveal-step: 0ms;
  }
}