/* Luwte — Colour tokens
 * Calm, professional palette. Navy is the canvas on dark; cream is the canvas on light.
 * Gold is the single accent. Terra / Sage are reserved, sparing supporting hues.
 */
:root {
  /* ---- Brand base palette ---- */
  --luwte-ink:    #15324B; /* Ink / navy — wordmark, display text, dark canvas */
  --luwte-blue:   #1F4E78; /* Blue — body text, links, secondary actions */
  --luwte-terra:  #B85042; /* Terra — warm accent, used sparingly */
  --luwte-sage:   #5E7553; /* Sage — calm accent, used sparingly */
  --luwte-gold:   #C9912F; /* Gold — primary accent, sound waves, highlights */
  --luwte-cream:  #F7F4ED; /* Cream — light canvas, text on dark */

  /* ---- Tints & shades (derived, calm steps) ---- */
  --luwte-ink-90:   #24405A;
  --luwte-ink-80:   #3a566d;
  --luwte-blue-70:  #4a719a;
  --luwte-gold-90:  #d6a44f;
  --luwte-gold-20:  #f1e4c8;
  --luwte-terra-20: #efd6d1;
  --luwte-sage-20:  #d8e0d2;

  /* Cream / paper steps for surfaces & borders on light */
  --luwte-cream-100: #F7F4ED;
  --luwte-paper:     #FDFBF6;
  --luwte-cream-200: #EFEADF;
  --luwte-cream-300: #E3DCCC;
  --luwte-cream-400: #CFC6B2;

  /* ---- Semantic aliases — LIGHT (default) ---- */
  --surface-page:    var(--luwte-cream-100);
  --surface-raised:  var(--luwte-paper);
  --surface-card:    var(--luwte-paper);
  --surface-sunken:  var(--luwte-cream-200);
  --surface-inverse: var(--luwte-ink);

  --text-display:    var(--luwte-ink);
  --text-heading:    var(--luwte-ink);
  --text-body:       var(--luwte-blue);
  --text-muted:      #5e7186;
  --text-on-dark:    var(--luwte-cream);
  --text-on-accent:  var(--luwte-cream);

  --accent:          var(--luwte-gold);
  --accent-strong:   #b07f25;
  --link:            var(--luwte-blue);
  --link-hover:      var(--luwte-ink);

  --border-subtle:   var(--luwte-cream-300);
  --border-strong:   var(--luwte-cream-400);
  --border-focus:    var(--luwte-gold);

  --positive:        var(--luwte-sage);
  --warning:         var(--luwte-gold);
  --critical:        var(--luwte-terra);
}

/* ---- Semantic aliases — DARK (navy canvas) ---- */
:root[data-theme="dark"],
.luwte-dark {
  --surface-page:    var(--luwte-ink);
  --surface-raised:  var(--luwte-ink-90);
  --surface-card:    var(--luwte-ink-90);
  --surface-sunken:  #102537;
  --surface-inverse: var(--luwte-cream);

  --text-display:    var(--luwte-cream);
  --text-heading:    var(--luwte-cream);
  --text-body:       #d3dbe4;
  --text-muted:      #9fb0c0;
  --text-on-dark:    var(--luwte-cream);
  --text-on-accent:  var(--luwte-ink);

  --accent:          var(--luwte-gold);
  --accent-strong:   var(--luwte-gold-90);
  --link:            var(--luwte-gold);
  --link-hover:      var(--luwte-gold-90);

  --border-subtle:   rgba(247, 244, 237, 0.14);
  --border-strong:   rgba(247, 244, 237, 0.28);
  --border-focus:    var(--luwte-gold);
}