/* Stemmery — Color tokens
   Palette: Evergreen (anchor), Sage (secondary), Clay (accent),
   Ivory (canvas), Ink (text). Evergreen + ivory is the default;
   clay is used deliberately, never more than ~10% of a layout. */

:root {
  /* ---- Brand core ---- */
  --evergreen: #26392E; /* anchor — logo, headlines, dark backgrounds */
  --sage:      #B3C0A9; /* secondary — soft fills, botanical accents */
  --clay:      #CB7E5B; /* accent — warmth, the "party" register */
  --ivory:     #F5F0E6; /* canvas — primary background */
  --ink:       #23241F; /* text — body copy, fine print */

  /* ---- Tints & shades (derived, harmonious) ---- */
  --evergreen-700: #1B2A21; /* deeper evergreen — pressed, footers */
  --evergreen-300: #5A6B5F; /* muted evergreen — secondary labels */
  --sage-200:      #D2DBC9; /* pale sage — hairlines, quiet fills */
  --sage-100:      #E6EADF; /* faintest sage tint */
  --clay-600:      #B36A48; /* darker clay — hover/press on accent */
  --clay-100:      #F0DBCF; /* pale clay wash */
  --ivory-200:     #ECE5D6; /* shaded ivory — alt sections */
  --line:          #D8D0BE; /* default hairline on ivory */

  /* ---- Neutral ink scale ---- */
  --ink-muted:  #6B7363; /* captions, meta, placeholder */
  --ink-faint:  #9AA191; /* disabled text */
  --white:      #FFFFFF;

  /* ---- Semantic aliases ---- */
  --surface-canvas:   var(--ivory);
  --surface-alt:      var(--ivory-200);
  --surface-card:     var(--white);
  --surface-inverse:  var(--evergreen);
  --surface-sage:     var(--sage);

  --text-heading:     var(--evergreen);
  --text-body:        var(--ink);
  --text-muted:       var(--ink-muted);
  --text-on-dark:     var(--ivory);
  --text-accent:      var(--clay);

  --border-default:   var(--line);
  --border-strong:    var(--evergreen);

  --accent:           var(--clay);
  --accent-hover:     var(--clay-600);

  /* ---- Status (botanical-leaning, used sparingly) ---- */
  --success: #4E7A52;
  --warning: #C79A3E;
  --error:   #B4503C;
}