/* 01-settings/_color-semantic.css — ROLES.
   Components read only these. Light is the :root default ("golvet", the concrete
   floor); dark is [data-theme="dark"] ("natten", the mill at night), with a
   prefers-color-scheme fallback when no explicit choice is stored. Every token
   defined in the light block MUST be redefined in both dark blocks, or dark
   silently inherits the light value. */
:root {
  color-scheme: light;

  /* Grounds — concrete */
  --ground:          var(--concrete-100);
  --surface:         var(--concrete-0);
  --surface-sunken:  var(--concrete-200);
  --surface-raised:  var(--concrete-0);
  --rule:            var(--concrete-300);
  --rule-strong:     var(--concrete-400);
  --scrim:           var(--scrim-light);

  /* Ink — iron */
  --ink:        var(--iron-ink);
  --ink-muted:  var(--iron-ink-muted);
  --ink-faint:  var(--iron-500);

  /* Accent — pine. --accent is a FILL (a plank) and carries --ink-on-accent, which is
     dark. --accent-ink is pine as TEXT on a ground: links, active underlines, eyebrows. */
  --accent:        var(--pine-400);
  --accent-hover:  var(--pine-500);
  --accent-ink:    var(--pine-700);
  --ink-on-accent: var(--iron-ink);
  --accent-wash:   color-mix(in oklab, var(--pine-400) 18%, var(--surface));
  --link:          var(--pine-700);
  --focus-ring:    var(--pine-500);

  /* The bar — the topbar is iron in both themes */
  --bar-ground:     var(--iron-850);
  --bar-ink:        var(--iron-100);
  --bar-ink-muted:  var(--iron-300);
  --bar-rule:       var(--iron-700);
  --bar-hover:      var(--iron-800);

  /* The plank — the one large pine surface (login stage, e-mail head) */
  --plank-a:     var(--pine-300);
  --plank-b:     var(--pine-500);
  --plank-line:  var(--pine-700);
  --plank-ink:   var(--iron-ink);

  /* Bands — ink / fill / line locked together by the band API (see _band.css) */
  --ink-on-band:      var(--white);
  --band-ok-ink:      var(--spruce-600);
  --band-ok-fill:     color-mix(in oklab, var(--spruce-600) 14%, var(--surface));
  --band-ok-line:     color-mix(in oklab, var(--spruce-600) 45%, var(--surface));
  --band-warn-ink:    var(--resin-600);
  --band-warn-fill:   color-mix(in oklab, var(--resin-500) 18%, var(--surface));
  --band-warn-line:   color-mix(in oklab, var(--resin-600) 45%, var(--surface));
  --band-danger-ink:  var(--falu-600);
  --band-danger-fill: color-mix(in oklab, var(--falu-600) 14%, var(--surface));
  --band-danger-line: color-mix(in oklab, var(--falu-600) 45%, var(--surface));
  --band-neutral-ink:  var(--ink-muted);
  --band-neutral-fill: var(--surface-sunken);
  --band-neutral-line: var(--rule-strong);

  /* Edge dots at full strength (small areas only) */
  --dot-ok:     var(--spruce-600);
  --dot-warn:   var(--resin-500);
  --dot-danger: var(--falu-600);

  /* Shadow colour consumed by _shadows.css */
  --shadow-color: 20 21 22;
}

[data-theme="dark"] {
  color-scheme: dark;

  --ground:          var(--iron-900);
  --surface:         var(--iron-850);
  --surface-sunken:  var(--iron-900);
  --surface-raised:  var(--iron-800);
  --rule:            var(--iron-700);
  --rule-strong:     var(--iron-600);
  --scrim:           var(--scrim-dark);

  --ink:        var(--iron-100);
  --ink-muted:  var(--iron-300);
  --ink-faint:  var(--iron-400);

  --accent:        var(--pine-400);
  --accent-hover:  var(--pine-300);
  --accent-ink:    var(--pine-300);
  --ink-on-accent: var(--iron-950);
  --accent-wash:   color-mix(in oklab, var(--pine-400) 16%, var(--surface));
  --link:          var(--pine-300);
  --focus-ring:    var(--pine-300);

  --bar-ground:     var(--iron-950);
  --bar-ink:        var(--iron-100);
  --bar-ink-muted:  var(--iron-300);
  --bar-rule:       var(--iron-700);
  --bar-hover:      var(--iron-800);

  --plank-a:     var(--pine-700);
  --plank-b:     var(--pine-800);
  --plank-line:  var(--iron-950);
  --plank-ink:   var(--iron-100);

  --ink-on-band:      var(--iron-950);
  --band-ok-ink:      var(--spruce-300);
  --band-ok-fill:     color-mix(in oklab, var(--spruce-300) 16%, var(--surface));
  --band-ok-line:     color-mix(in oklab, var(--spruce-300) 40%, var(--surface));
  --band-warn-ink:    var(--resin-300);
  --band-warn-fill:   color-mix(in oklab, var(--resin-300) 16%, var(--surface));
  --band-warn-line:   color-mix(in oklab, var(--resin-300) 40%, var(--surface));
  --band-danger-ink:  var(--falu-300);
  --band-danger-fill: color-mix(in oklab, var(--falu-300) 16%, var(--surface));
  --band-danger-line: color-mix(in oklab, var(--falu-300) 40%, var(--surface));
  --band-neutral-ink:  var(--ink-muted);
  --band-neutral-fill: var(--iron-800);
  --band-neutral-line: var(--rule-strong);

  --dot-ok:     var(--spruce-300);
  --dot-warn:   var(--resin-300);
  --dot-danger: var(--falu-300);

  --shadow-color: 0 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground:          var(--iron-900);
    --surface:         var(--iron-850);
    --surface-sunken:  var(--iron-900);
    --surface-raised:  var(--iron-800);
    --rule:            var(--iron-700);
    --rule-strong:     var(--iron-600);
    --scrim:           var(--scrim-dark);

    --ink:        var(--iron-100);
    --ink-muted:  var(--iron-300);
    --ink-faint:  var(--iron-400);

    --accent:        var(--pine-400);
    --accent-hover:  var(--pine-300);
    --accent-ink:    var(--pine-300);
    --ink-on-accent: var(--iron-950);
    --accent-wash:   color-mix(in oklab, var(--pine-400) 16%, var(--surface));
    --link:          var(--pine-300);
    --focus-ring:    var(--pine-300);

    --bar-ground:     var(--iron-950);
    --bar-ink:        var(--iron-100);
    --bar-ink-muted:  var(--iron-300);
    --bar-rule:       var(--iron-700);
    --bar-hover:      var(--iron-800);

    --plank-a:     var(--pine-700);
    --plank-b:     var(--pine-800);
    --plank-line:  var(--iron-950);
    --plank-ink:   var(--iron-100);

    --ink-on-band:      var(--iron-950);
    --band-ok-ink:      var(--spruce-300);
    --band-ok-fill:     color-mix(in oklab, var(--spruce-300) 16%, var(--surface));
    --band-ok-line:     color-mix(in oklab, var(--spruce-300) 40%, var(--surface));
    --band-warn-ink:    var(--resin-300);
    --band-warn-fill:   color-mix(in oklab, var(--resin-300) 16%, var(--surface));
    --band-warn-line:   color-mix(in oklab, var(--resin-300) 40%, var(--surface));
    --band-danger-ink:  var(--falu-300);
    --band-danger-fill: color-mix(in oklab, var(--falu-300) 16%, var(--surface));
    --band-danger-line: color-mix(in oklab, var(--falu-300) 40%, var(--surface));
    --band-neutral-ink:  var(--ink-muted);
    --band-neutral-fill: var(--iron-800);
    --band-neutral-line: var(--rule-strong);

    --dot-ok:     var(--spruce-300);
    --dot-warn:   var(--resin-300);
    --dot-danger: var(--falu-300);

    --shadow-color: 0 0 0;
  }
}