/* ===========================================================================
   LRS-Digital Studio — Color tokens
   Muted-Sage palette: soft greige paper, sage-green as the signature,
   warm olive-charcoal ink. Cozy but professional, calm and grown-up.
   (The clay logo keeps one warm spark — the rest of the system is sage.)
   =========================================================================== */

:root {
  /* --- Warm greige neutrals (paper → ink) ----------------------------- */
  --warm-0:    #ffffff;
  --warm-50:   #f3f4ec; /* page background — soft sage ivory */
  --warm-100:  #eaebdd;
  --warm-200:  #dcdccb;
  --warm-300:  #c5c6ac;
  --warm-400:  #a3a585;
  --warm-500:  #7f8163;
  --warm-600:  #5f6147;
  --warm-700:  #454734;
  --warm-800:  #2f3124;
  --warm-900:  #21221a; /* olive-charcoal ink */

  /* --- Primary — Muted Sage ------------------------------------------- */
  --sage-50:   #eef1e4;
  --sage-100:  #e2e7d0;
  --sage-200:  #cfd6b4;
  --sage-300:  #b4bd8d;
  --sage-400:  #97a06c;
  --sage-500:  #7b8453;
  --sage-600:  #626b41; /* primary fill */
  --sage-700:  #4c5333;
  --sage-800:  #383d26;

  /* --- Honey amber — reserved for the WARNING semantic only ----------- */
  --honey-100: #fbeccb;
  --honey-200: #f6d795;
  --honey-500: #d98e22;
  --honey-600: #b5731a;

  /* --- Semantic hues -------------------------------------------------- */
  --green-500: #5f9a55;
  --green-600: #487a40;
  --green-50:  #e4efdc;
  --red-500:   #c5402f;
  --red-600:   #a23223;
  --red-50:    #f6e1dc;
  --amber-500: #d98e22;
  --amber-50:  #fbeccb;
  --teal-500:  #3e7c8c;
  --teal-600:  #2f6373;
  --teal-50:   #d9e9ec;

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

  /* Surfaces */
  --color-bg:            var(--warm-50);
  --color-bg-sunken:     var(--warm-100);
  --color-surface:       var(--warm-0);
  --color-surface-raised:var(--warm-0);
  --color-surface-muted: var(--warm-100);
  --color-surface-inverse: var(--warm-900);

  /* Text / ink */
  --text-strong:  var(--warm-900);
  --text-body:    var(--warm-800);
  --text-muted:   var(--warm-600);
  --text-subtle:  var(--warm-500);
  --text-inverse: var(--warm-50);
  --text-on-primary: #f6f8ef;

  /* Primary (sage) */
  --color-primary:        var(--sage-600);
  --color-primary-hover:  var(--sage-700);
  --color-primary-press:  var(--sage-800);
  --color-primary-soft:   var(--sage-50);
  --color-on-primary:     #f6f8ef;

  /* Accent (deeper sage / olive — tonal, not a second hue) */
  --color-accent:         var(--sage-500);
  --color-accent-hover:   var(--sage-700);
  --color-accent-soft:    var(--sage-100);

  /* Secondary (warm greige) */
  --color-secondary:      var(--warm-600);
  --color-secondary-soft: var(--warm-100);

  /* Borders */
  --border-subtle:  var(--warm-200);
  --border-default: var(--warm-300);
  --border-strong:  var(--warm-400);

  /* Feedback */
  --color-success:      var(--green-500);
  --color-success-soft: var(--green-50);
  --color-danger:       var(--red-500);
  --color-danger-soft:  var(--red-50);
  --color-warning:      var(--amber-500);
  --color-warning-soft: var(--amber-50);
  --color-info:         var(--teal-500);
  --color-info-soft:    var(--teal-50);

  /* Focus ring (sage) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--sage-600) 32%, transparent);
}