/* ============================================================
   Kheiri Lab — Color tokens
   ------------------------------------------------------------
   A warm, human, academic palette.
   • Warm cream "paper" grounds the system (whitespace that feels
     soft, not clinical).
   • Madder — a warm vascular red-clay — is the signature accent
     (blood, warmth, the biological). Used sparingly.
   • Fluidic teal is the cool secondary (biofluidics, channels).
   • Amber + plum are supporting hues for the research pillars.
   Base values first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Warm neutrals (paper → ink) ---- */
  --paper:        #fbf8f3; /* page background, warm cream */
  --paper-sunk:   #f4ede2; /* recessed / alternating sections, warm sand */
  --paper-raised: #fffdfa; /* cards, raised surfaces */
  --sand-100:     #efe7da;
  --sand-200:     #e6dccb; /* hairline borders, dividers */
  --sand-300:     #d8ccb7;
  --stone-400:    #b3a896;
  --stone-500:    #8b8071; /* muted text, captions */
  --stone-600:    #6a6053;
  --ink-700:      #4a423a; /* body text */
  --ink-800:      #332d27;
  --ink-900:      #241f1b; /* headings, strong text */

  /* ---- Madder (primary accent — vascular red-clay) ---- */
  --madder-50:   #faece8;
  --madder-100:  #f4d8cf;
  --madder-200:  #e9b1a1;
  --madder-300:  #db8773;
  --madder-400:  #cd6149;
  --madder-500:  #c24a38; /* base accent */
  --madder-600:  #a83a2a; /* hover / pressed */
  --madder-700:  #8a2f22;
  --madder-800:  #6d271d;

  /* ---- Fluidic teal (secondary — biofluidics) ---- */
  --teal-50:    #e6f0f0;
  --teal-100:   #cbe1e2;
  --teal-200:   #9ec8ca;
  --teal-300:   #63a8ac;
  --teal-400:   #3a888e;
  --teal-500:   #2e7d86; /* base */
  --teal-600:   #246169;
  --teal-700:   #1d4d54;

  /* ---- Amber (hormone / circadian) ---- */
  --amber-100:  #f7e7cc;
  --amber-300:  #e6b667;
  --amber-500:  #d4912f;
  --amber-600:  #b3771f;

  /* ---- Plum (sex-aware biology) ---- */
  --plum-100:   #ecdfe7;
  --plum-300:   #b888a6;
  --plum-500:   #834f70;
  --plum-600:   #6a3e5a;

  /* ---- Functional ---- */
  --success-500: #4f8a5b;
  --success-100: #dcebdd;
  --warning-500: #c9892b;
  --danger-500:  #c0402f;

  /* ============================================================
     Semantic aliases — reference THESE in components/UI
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-sunk:    var(--paper-sunk);
  --surface-card:    var(--paper-raised);
  --surface-inset:   var(--sand-100);
  --surface-ink:     var(--ink-900);   /* dark sections (footer, hero invert) */

  /* Text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--stone-500);
  --text-faint:   var(--stone-400);
  --text-on-ink:  #f3ece0;             /* text over dark/ink surfaces */
  --text-on-accent: #fdf3ef;           /* text over madder */

  /* Borders & dividers */
  --border-hair:   var(--sand-200);
  --border-soft:   var(--sand-300);
  --border-strong: var(--stone-400);

  /* Accent (madder) */
  --accent:         var(--madder-500);
  --accent-hover:   var(--madder-600);
  --accent-press:   var(--madder-700);
  --accent-tint:    var(--madder-50);
  --accent-tint-2:  var(--madder-100);
  --on-accent:      var(--text-on-accent);

  /* Secondary (teal) */
  --secondary:      var(--teal-500);
  --secondary-hover:var(--teal-600);
  --secondary-tint: var(--teal-50);

  /* Pillar accents (research themes) */
  --pillar-tme:     var(--madder-500); /* Pillar 1 — tumor microenvironment */
  --pillar-hormone: var(--plum-500);   /* Pillar 2 — hormone cycles */
  --pillar-biomfg:  var(--teal-500);   /* Pillar 3 — 4D biomanufacturing */

  /* Focus ring */
  --focus-ring: color-mix(in oklch, var(--madder-500) 55%, white);
}