/* ============================================================
   Stella Rescue & Sanctuary — Color Tokens
   Sampled directly from the foundation logo.
   Base ramps + semantic aliases.
   ============================================================ */
:root {
  /* --- Ink (navy) : primary dark, drawn from the dog silhouette & script --- */
  --ink-900: #141c28;
  --ink-800: #1d2b3a;
  --ink-700: #212e3e;   /* brand ink — core dark */
  --ink-600: #2c3b4d;
  --ink-500: #3d4f63;
  --ink-400: #5c6d81;
  --ink-300: #8593a3;
  --ink-200: #b9c2cd;
  --ink-100: #dde2e8;
  --ink-050: #eef1f4;

  /* --- Mauve (dusty rose) : accent, hearts, "FOUNDATION" --- */
  --mauve-900: #5c3a44;
  --mauve-800: #744b57;
  --mauve-700: #895d6a;
  --mauve-600: #946573;   /* brand mauve — core accent */
  --mauve-500: #a67885;
  --mauve-400: #bd94a0;
  --mauve-300: #d3b4bd;
  --mauve-200: #e6d1d7;
  --mauve-100: #f2e6ea;
  --mauve-050: #f9f2f4;

  /* --- Sage (olive) : secondary accent, laurel leaves, tagline --- */
  --sage-900: #4f4f42;
  --sage-800: #6b6b5a;
  --sage-700: #7c7c69;
  --sage-600: #8a8a77;   /* brand sage — core secondary */
  --sage-500: #9ba088;   /* leaf green, slightly cooler */
  --sage-400: #b1b59f;
  --sage-300: #c8ccba;
  --sage-200: #dde0d3;
  --sage-100: #ecefe6;
  --sage-050: #f5f6f1;

  /* --- Warm neutrals : cream & sand from the crest interior --- */
  --sand-700: #7a6a55;
  --sand-600: #a99a86;
  --cream-500: #e6d6c4;  /* tan — cat / deeper warm surface */
  --cream-400: #f0dfcd;
  --cream-300: #f3e7d8;  /* core cream */
  --cream-200: #f7ede4;
  --cream-100: #faf4ec;
  --cream-050: #fcf9f3;

  /* --- Paper & pure --- */
  --paper: #faf6ef;      /* page background — warm off-white */
  --white: #ffffff;
  --black: #10151d;

  /* --- Semantic status (harmonized to the warm palette) --- */
  --success-600: #5f7d54;
  --success-100: #e7efe1;
  --warning-600: #c08a3e;
  --warning-100: #f7ecd8;
  --danger-600:  #b5514f;
  --danger-100:  #f6e2e1;
  --info-600:    #4a6b83;
  --info-100:    #e2ebf1;

  /* ============================================================
     SEMANTIC ALIASES  — reference these in components
     ============================================================ */
  /* Text */
  --text-strong:   var(--ink-700);
  --text-body:     var(--ink-600);
  --text-muted:    var(--ink-400);
  --text-subtle:   var(--ink-300);
  --text-inverse:  var(--cream-100);
  --text-accent:   var(--mauve-600);
  --text-on-accent: var(--white);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-warm:    var(--cream-200);
  --surface-warm-2:  var(--cream-300);
  --surface-sand:    var(--cream-500);
  --surface-ink:     var(--ink-700);
  --surface-mauve:   var(--mauve-600);
  --surface-sage:    var(--sage-600);

  /* Borders & lines */
  --border-soft:   var(--ink-100);
  --border-warm:   #ece0cf;
  --border-strong: var(--ink-200);
  --divider:       #eadfce;

  /* Interactive / brand actions */
  --action:            var(--mauve-600);
  --action-hover:      var(--mauve-700);
  --action-active:     var(--mauve-800);
  --action-subtle:     var(--mauve-050);
  --action-secondary:  var(--sage-600);
  --action-secondary-hover: var(--sage-700);

  /* Focus */
  --focus-ring: var(--mauve-500);
}