/* Stout Design System — colour tokens
   Dark foundation, fluid tonal model. Four tones with no fixed roles
   (colour follows content, not category). Red is the only fixed-meaning colour. */

:root {
  /* ---- Foundation — dark surfaces ---- */
  --sds-bg:        #0f1117;                  /* page canvas */
  --sds-surface:   #181c26;                  /* default card / panel */
  --sds-raised:    #1e2330;                  /* elevated / hover state */
  --sds-border:    rgba(255, 255, 255, 0.08);/* default hairline */
  --sds-border-s:  rgba(255, 255, 255, 0.14);/* emphasis border */

  /* ---- Text ---- */
  --sds-t:   #e8e6e0;   /* primary — warm white, never pure white */
  --sds-t2:  #9e9c96;   /* secondary — labels, metadata */
  --sds-t3:  #4a4845;   /* subtle — dividers, placeholders */

  /* ---- Tones — four colours, three stops each, no fixed roles ----
     full = text / active border / chart line / icon
     mid  = inactive border / border on dim background
     dim  = background wash behind chips, cards, tinted panels        */
  --sds-teal:     #1D9E75;
  --sds-teal-m:   #0F6E56;
  --sds-teal-d:   #0a1f18;

  --sds-amber:    #EF9F27;
  --sds-amber-m:  #854F0B;
  --sds-amber-d:  #1c1506;

  --sds-purple:   #7F77DD;
  --sds-purple-m: #534AB7;
  --sds-purple-d: #110f20;

  --sds-coral:    #D85A30;
  --sds-coral-m:  #993C1D;
  --sds-coral-d:  #1c0c06;

  /* ---- Semantic — fixed meaning. Red = error / failure / critical only ---- */
  --sds-red:    #E24B4A;
  --sds-red-m:  #7a2020;
  --sds-red-d:  #1c0808;

  /* ---- Semantic aliases ---- */
  --text-body:        var(--sds-t);
  --text-muted:       var(--sds-t2);
  --text-subtle:      var(--sds-t3);
  --surface-page:     var(--sds-bg);
  --surface-card:     var(--sds-surface);
  --surface-raised:   var(--sds-raised);
  --border-hairline:  var(--sds-border);
  --border-emphasis:  var(--sds-border-s);
}