/* ============================================================
   COLORS — Dr. Maslenko Design System
   A warm, reassuring teal palette with a honey accent
   (a quiet nod to the yellow of endometriosis awareness).
   Neutrals are warm-tinted, never cold grey.
   ============================================================ */

:root {
  /* ---- Primary: Teal (trust, calm, clinical-but-warm) ---- */
  --teal-50:  #eef5f4;
  --teal-100: #d8e9e6;
  --teal-200: #b2d2cd;
  --teal-300: #84b6b0;
  --teal-400: #569690;
  --teal-500: #38766f;
  --teal-600: #2f6e6a;   /* brand base */
  --teal-700: #265a57;
  --teal-800: #1f4744;
  --teal-900: #163433;

  /* ---- Accent: Honey / Amber (warmth, used sparingly) ---- */
  --honey-50:  #fbf4e6;
  --honey-100: #f6e8c9;
  --honey-300: #e6c98c;
  --honey-500: #cf9b54;
  --honey-600: #bd8540;
  --honey-700: #9c6a31;

  /* ---- Blush: a soft secondary warm tone for illustration ---- */
  --blush-100: #f7e7e0;
  --blush-300: #e8c4b8;
  --blush-500: #cf9a8a;

  /* ---- Warm neutrals (ink) ---- */
  --ink-900: #1c2422;   /* near-black, warm */
  --ink-800: #2a3431;
  --ink-700: #3c4744;
  --ink-600: #515d59;
  --ink-500: #66726e;
  --ink-400: #889390;
  --ink-300: #aab2af;
  --ink-200: #d3d8d5;
  --ink-100: #e7ebe8;
  --ink-50:  #f2f4f2;

  /* ---- Paper / surfaces ---- */
  --paper:        #faf8f4;   /* warm off-white page */
  --paper-warm:   #f5f1ea;   /* slightly deeper warm band */
  --white:        #ffffff;
  --mint:         #eef5f3;   /* cool soft surface */
  --mint-deep:    #dde9e6;

  /* ---- Semantic state hues ---- */
  --success-bg: #e4f0e8;  --success-fg: #2f6e4f;
  --warning-bg: #f9ecd2;  --warning-fg: #9c6a31;
  --error-bg:   #f6e2de;  --error-fg:   #a4493c;
  --info-bg:    #e2eef0;  --info-fg:    #2f6e6a;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */
  --color-primary:        var(--teal-600);
  --color-primary-hover:  var(--teal-700);
  --color-primary-active: var(--teal-800);
  --color-primary-soft:   var(--teal-50);
  --color-on-primary:     #ffffff;

  --color-accent:         var(--honey-500);
  --color-accent-hover:   var(--honey-600);
  --color-accent-soft:    var(--honey-50);

  --text-heading:  var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-dark:  #f4f1ec;
  --text-link:     var(--teal-700);

  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-soft:   var(--mint);
  --surface-warm:   var(--paper-warm);
  --surface-inverse: var(--teal-900);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-focus:   var(--teal-500);

  --ring-focus: 0 0 0 3px rgba(56, 118, 111, 0.30);
}