/* ===========================================================================
   MUNAR — Color tokens
   Palette hierarchy: 50% Bone · 25% Graphite · 15% Sage · 10% Coral
   Coral = signal only (priority / recommendation / next action). Never décor.
   =========================================================================== */

:root {
  /* --- Brand base palette ------------------------------------------------ */
  --graphite: #25221E;   /* deepened ink — crisp text, structure, primary confirm */
  --sage:     #46685A;   /* deeper modern green — trust, confirmed states */
  --bone:     #F2EEE6;   /* light, airy warm canvas — modernized (was #EDE7DB) */
  --coral:    #FF5A3C;   /* vivid signal: priority, recommendation, next action */
  --stone:    #98978E;   /* cleaner neutral — borders, low-priority info */

  /* --- Graphite / Ink ramp (structure / text) ---------------------------- */
  --graphite-900: #161412;
  --graphite-800: #1E1B18;
  --graphite-700: #25221E;  /* base */
  --graphite-600: #3A352F;
  --graphite-500: #524C44;

  /* --- Sage ramp (trust / confirmed) ------------------------------------- */
  --sage-700: #2F4A3D;
  --sage-600: #46685A;      /* base */
  --sage-500: #5E7E6F;
  --sage-200: #C2D0C8;
  --sage-100: #DAE3DD;
  --sage-50:  #EAF0EC;      /* confirmed-state soft fill */

  /* --- Bone ramp (canvas / surfaces) — modernized: lighter, airier --------- */
  --bone-50:  #FBF9F5;      /* lightest canvas */
  --bone-100: #F2EEE6;      /* base canvas — light, modern, barely-warm */
  --bone-200: #EAE5DA;      /* hairline on bone */
  --bone-300: #DFD9CC;      /* stronger divider on bone */
  --warm-white: #FFFFFF;    /* card surface — clean white, canvas stays light */
  --paper:    #FCFBF8;      /* faintly warm white for nested/inset surfaces */

  /* --- Coral ramp (signal) ----------------------------------------------- */
  --coral-700: #E23F22;     /* coral pressed */
  --coral-600: #FF5A3C;     /* base */
  --coral-500: #FF7558;     /* coral hover */
  --coral-100: #FFE0D7;     /* signal soft fill */

  /* --- Stone ramp (neutral / low priority) ------------------------------- */
  --stone-600: #7C7B73;
  --stone-500: #98978E;     /* base */
  --stone-300: #C0BFB7;
  --stone-200: #D6D5CE;

  /* === Semantic aliases =================================================== */

  /* Surfaces */
  --surface-canvas:     var(--bone-100);
  --surface-canvas-alt: var(--bone-50);
  --surface-card:       var(--warm-white);   /* clean white card */
  --surface-raised:     #FFFFFF;
  --surface-graphite:   var(--graphite-700);
  --surface-sage-soft:  var(--sage-50);
  --surface-signal-soft:var(--coral-100);
  --surface-inset:      var(--paper);          /* faint-warm inset, not beige */
  --surface-inset-warm: #F1ECE2;               /* stronger bone inset when needed */

  /* Text */
  --text-primary:   var(--graphite-700);
  --text-secondary: var(--graphite-500);
  --text-muted:     var(--stone-600);
  --text-on-dark:   var(--bone-50);
  --text-on-coral:  var(--graphite-900);  /* graphite on coral = AA */
  --text-on-sage:   #FFFFFF;
  --text-link:      var(--sage-700);

  /* Borders / dividers — finer, lighter hairlines for a modern read */
  --border-hairline: rgba(52, 48, 44, 0.08);   /* near-invisible separator */
  --border-subtle:  rgba(52, 48, 44, 0.10);    /* default card hairline */
  --border-default: rgba(52, 48, 44, 0.16);    /* input / control border */
  --border-strong:  var(--graphite-500);
  --border-focus:   var(--coral-600);

  /* Signal & status (never color-only — pair with label/icon) */
  --signal:        var(--coral-600);   /* detected / recommended / next */
  --status-confirmed: var(--sage-600); /* availability, MOQ, lead time */
  --status-inferred:  var(--graphite-600); /* reasoned, not certain */
  --status-uncertain: var(--stone-500);/* needs one more data point */
  --status-protected: var(--graphite-700); /* price / permission gated */

  /* Interactive */
  --action-primary:        var(--graphite-700);
  --action-primary-hover:  var(--graphite-800);
  --action-primary-press:  var(--graphite-900);
  --action-signal:         var(--coral-600);
  --action-signal-hover:   var(--coral-500);
  --action-signal-press:   var(--coral-700);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(255, 90, 60, 0.32);
}