/* ─── DESIGN TOKENS — PeptideIQ ──────────────────────────────────────────── */
/* Source of truth: design-system.md. Never hardcode values — always use vars. */

:root {
  /* Brand */
  --teal:          #147D77;
  --teal-dark:     #0D5E5A;
  --teal-pale:     #EAF5F4;
  --teal-mid:      #C2E0DE;
  --teal-link:     #147D77;
  --logo-accent:   #5FD3CC;

  /* Neutrals */
  --black:         #0A0A0A;
  --dark:          #1A1A1A;
  --body:          #333333;
  --muted:         #666666;
  --light-muted:   #999999;
  --border:        #E0E0E0;
  --light:         #F5F5F5;
  --cream:         #F5F0E8;
  --white:         #FFFFFF;

  /* Typography */
  --sans:          'Poppins', system-ui, sans-serif;

  /* Radius */
  --r:             10px;

  /* Status */
  --positive:      #15803D;
  --caution:       #D97706;
  --negative:      #DC2626;

  /* Callout variants */
  --callout-body-text: #374151;
  --blue-bg:       #EFF6FF;
  --blue-border:   #3B82F6;
  --blue-title:    #1D4ED8;
  --yellow-bg:     #FFFBEB;
  --yellow-border: #F59E0B;
  --yellow-title:  #92400E;
  --green-bg:      #F0FDF4;
  --green-border:  #22C55E;
  --green-title:   #15803D;

  /* Evidence grades */
  --grade-strong-bg:       #DCFCE7;
  --grade-strong-text:     #15803D;
  --grade-moderate-bg:     #FEF9C3;
  --grade-moderate-text:   #854D0E;
  --grade-limited-bg:      #FEE2E2;
  --grade-limited-text:    #991B1B;
  --grade-preliminary-text:#555555;

  /* Footer */
  --footer-bg:      #F2F4F6;
  --footer-divider: #DDDDDD;
  --footer-link:    #555555;
  --footer-link-hover: #111111;
  --footer-legal:   #AAAAAA;

  /* Tool tile hover */
  --tool-tile-hover-bg: #C8E3E1;
  --tool-tile-dark-hover-bg: #0B4F4B;
  --tool-dark-label:   #7ECFCA;

  /* Gradients */
  --grad-email:        linear-gradient(120deg, #D8EEEC 0%, #C5E3E0 35%, #B8D8D5 70%, #A8CBCA 100%);
  --grad-tool-feature: linear-gradient(160deg, #C8E8E5 0%, #9ECFCB 50%, #7DBDB9 100%);
  --grad-featured-img: linear-gradient(135deg, #b2dfdb 0%, #e0f2f1 50%, #b2ebf2 100%);
  --grad-glp1:         linear-gradient(135deg, #E0F7F5, #A7F0EB);
  --grad-dosing:       linear-gradient(135deg, #E8F5E9, #A5D6A7);
  --grad-side-effects: linear-gradient(135deg, #FFF8E1, #FFCC80);

  /* Pill inactive border */
  --pill-border: #CCCCCC;

  /* Transitions */
  --t-fast:  0.15s ease;
  --t-mid:   0.2s ease;
}