/* ============================================================
   My Safe Spaces — Color tokens
   Sage greens (calm, growth) · warm clay & marigold (Indian earth)
   · calm teal (clinical trust) · warm stone neutrals
   ============================================================ */

:root {
  /* ---- Sage (primary) ---------------------------------- */
  --sage-50:  #f0f5f1;
  --sage-100: #dfeae2;
  --sage-200: #c2d7c8;
  --sage-300: #9dbda7;
  --sage-400: #74a084;
  --sage-500: #54836a;
  --sage-600: #3f6b54;
  --sage-700: #335645;
  --sage-800: #2a4538;
  --sage-900: #22382e;

  /* ---- Clay / terracotta (secondary, Indian earth) ----- */
  --clay-50:  #fbf2ec;
  --clay-100: #f5ddd0;
  --clay-200: #ecc1ad;
  --clay-300: #dfa084;
  --clay-400: #d18464;
  --clay-500: #c16a4b;
  --clay-600: #a8543a;
  --clay-700: #8a4430;
  --clay-800: #6e382a;
  --clay-900: #5a2f24;

  /* ---- Marigold / saffron (festive accent, sparing) ---- */
  --marigold-100: #fdeccb;
  --marigold-300: #f6c266;
  --marigold-400: #f0a93c;
  --marigold-500: #e8941c;
  --marigold-600: #ce7a0e;

  /* ---- Calm teal (info / clinical supportive) ---------- */
  --teal-100: #d6ebec;
  --teal-300: #8cc3c6;
  --teal-500: #3e8e92;
  --teal-600: #2f7376;
  --teal-700: #265d60;

  /* ---- Warm stone (neutrals) --------------------------- */
  --stone-0:   #ffffff;
  --stone-50:  #faf8f5;
  --stone-100: #f3efe9;
  --stone-200: #e6e0d6;
  --stone-300: #d2c9bc;
  --stone-400: #b0a593;
  --stone-500: #8a8073;
  --stone-600: #685f54;
  --stone-700: #4a4339;
  --stone-800: #322d26;
  --stone-900: #1f1b16;

  /* ---- Semantic hues ----------------------------------- */
  --green-success: #3f8f5e;
  --green-success-soft: #e2f0e7;
  --amber-warning: #e8941c;
  --amber-warning-soft: #fdeccb;
  --red-error: #c8493f;
  --red-error-soft: #f7e1de;
  --blue-info: #3e8e92;
  --blue-info-soft: #d6ebec;

  /* ============================================================
     Semantic aliases — reach for these in product code
     ============================================================ */

  /* Surfaces & background */
  --bg-page:        var(--stone-50);
  --bg-page-warm:   #f6f1ea;     /* alt warm section bg */
  --surface-card:   var(--stone-0);
  --surface-sunken: var(--stone-100);
  --surface-raised: var(--stone-0);
  --surface-brand:  var(--sage-600);
  --surface-brand-soft: var(--sage-100);
  --surface-accent-soft: var(--clay-100);

  /* Text */
  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--stone-50);
  --text-on-brand:  #ffffff;
  --text-brand:     var(--sage-700);
  --text-accent:    var(--clay-600);
  --text-link:      var(--sage-700);

  /* Borders & dividers */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--sage-500);

  /* Brand interactive */
  --brand:          var(--sage-600);
  --brand-hover:    var(--sage-700);
  --brand-active:   var(--sage-800);
  --brand-soft:     var(--sage-100);
  --accent:         var(--clay-500);
  --accent-hover:   var(--clay-600);

  /* Focus / states */
  --focus-ring:     var(--sage-400);
  --overlay-scrim:  rgba(31, 27, 22, 0.44);
}