/* Postie · tokens/themes.css — ROLE tokens per theme scope, over the fixed palette (colors.css).
   Dark is the default (:root + [data-theme="dark"]); light is the alternate ([data-theme="light"]).
   A theme block APPLIES color + background-color; it never only remaps (a remap-only theme leaves
   inherited text in the wrong ink).

   Two grounds, two roles — `ground-role-split` (components/RULES.md):
     brand ground   — chrome-bar, masthead-band, hero, agent card, brand-tone buttons.
                      Charcoal in BOTH themes; its inks never change with theme.
     working ground — list, message, tables, dense reading. Flips with theme: night ↔ paper.

   The CONTEXT layer (--postie-c-*) is what components read. The theme scope sets the working
   context; `.postie-brand` sets the brand context; `.postie-working` re-enters the working one
   inside a brand block. A component NEVER writes a `.postie-brand <x>` descendant rule — that
   rule (0,2,0) would out-rank the re-entry class (0,1,0). Whichever of the two classes is the
   nearest ancestor wins, by inheritance: no specificity, no order dependence.
   Every scope's mapping and every role value below is carried over from components/tokens.working.css
   unchanged; the role names ARE the working-set names, so every consumer keeps resolving. */

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

  /* ---- brand ground (theme-invariant) ---- */
  --postie-ground:              var(--postie-charcoal);
  --postie-ink-brand:           var(--postie-ink-on-charcoal);
  --postie-body-brand:          var(--postie-body-on-charcoal);
  --postie-muted-brand:         var(--postie-muted-on-charcoal);
  --postie-accent-text-brand:   var(--postie-oxblood-lift);
  --postie-accent-hover-brand:  var(--postie-oxblood-lift-hover);
  --postie-edge-brand:          var(--postie-muted-on-charcoal); /* ghost-button edge on the chrome (5.15, clears 3:1) */
  --postie-raised-brand:        var(--postie-charcoal-deep);     /* search well, avatar, chips on the chrome */

  /* ---- working ground (dark = night) ---- */
  --postie-surface:             var(--postie-night);
  --postie-raised:              var(--postie-night-raised);
  --postie-selected:            var(--postie-night-selected);
  --postie-rule:                var(--postie-night-rule);        /* decorative, dense tables only — never a UI edge */
  --postie-edge:                var(--postie-night-edge);        /* the only visible UI border */
  --postie-pebble-1:            var(--postie-night-pebble-1);
  --postie-pebble-2:            var(--postie-night-pebble-2);
  --postie-pebble-ink:          var(--postie-ink-on-charcoal);   /* pebble-1 12.20 · pebble-2 10.19 */
  --postie-ink:                 var(--postie-ink-on-night);
  --postie-body:                var(--postie-body-on-night);
  --postie-muted:               var(--postie-muted-on-night);
  --postie-accent:              var(--postie-oxblood);           /* FILL only on dark */
  --postie-accent-ink:          var(--postie-ink-on-oxblood);
  --postie-accent-text:         var(--postie-oxblood-lift);      /* night 5.60 · selected 4.97 */
  --postie-accent-hover:        var(--postie-oxblood-lift-hover);/* night 7.01 */

  /* ---- derived roles (theme-specific by rule) ---- */
  --postie-triage:              var(--postie-night-selected);    /* triage-band: tint on dark */
  --postie-triage-ink:          var(--postie-ink-on-night);
  --postie-triage-signal:       var(--postie-oxblood-lift);      /* dot + link on the band */
  --postie-select-fill:         var(--postie-charcoal);          /* selected segment on working: charcoal on dark */
  --postie-select-ink:          var(--postie-ink-on-charcoal);

  /* ---- context = working (default) ---- */
  --postie-c-ground:      var(--postie-surface);
  --postie-c-raised:      var(--postie-raised);
  --postie-c-ink:         var(--postie-ink);
  --postie-c-body:        var(--postie-body);
  --postie-c-muted:       var(--postie-muted);
  --postie-c-edge:        var(--postie-edge);
  --postie-c-accent-text: var(--postie-accent-text);
  --postie-c-accent-hover:var(--postie-accent-hover);
  --postie-c-pebble-1:    var(--postie-pebble-1);
  --postie-c-pebble-2:    var(--postie-pebble-2);
  --postie-c-pebble-ink:  var(--postie-pebble-ink);
  --postie-c-selected:    var(--postie-selected);    /* accent badge, live chip */
  --postie-c-select-fill: var(--postie-select-fill); /* selected segment */
  --postie-c-select-ink:  var(--postie-select-ink);

  /* APPLY, not just remap */
  color: var(--postie-ink);
  background-color: var(--postie-surface);
}

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

  /* brand ground: identical to dark — dark chrome over paper; only the raised step lifts */
  --postie-raised-brand:        var(--postie-charcoal-lift);     /* ink-brand 12.85 · body-brand 8.27 · muted-brand 4.62 */

  /* working ground (light = paper) */
  --postie-surface:             var(--postie-paper);
  --postie-raised:              var(--postie-paper-raised);
  --postie-selected:            var(--postie-paper-selected);
  --postie-rule:                var(--postie-paper-rule);
  --postie-edge:                var(--postie-paper-edge);        /* paper 3.42 · raised 3.05 */
  --postie-pebble-1:            var(--postie-paper-pebble-1);
  --postie-pebble-2:            var(--postie-paper-pebble-2);
  --postie-pebble-ink:          var(--postie-ink-on-paper);      /* pebble-1 13.06 · pebble-2 10.71 */
  --postie-ink:                 var(--postie-ink-on-paper);
  --postie-body:                var(--postie-body-on-paper);
  --postie-muted:               var(--postie-muted-on-paper);
  --postie-accent:              var(--postie-oxblood);           /* FILL for the primary moments on light */
  --postie-accent-ink:          var(--postie-ink-on-oxblood);
  --postie-accent-text:         var(--postie-oxblood);           /* paper 8.76 · raised 7.81 · selected 6.99 */
  --postie-accent-hover:        var(--postie-oxblood-deep);      /* paper 11.11 */

  --postie-triage:              var(--postie-oxblood);           /* triage-band: oxblood FILL on light */
  --postie-triage-ink:          var(--postie-ink-on-oxblood);
  --postie-triage-signal:       var(--postie-ink-on-oxblood);
  --postie-select-fill:         var(--postie-oxblood);           /* selected segment on working: oxblood on light */
  --postie-select-ink:          var(--postie-ink-on-oxblood);

  --postie-c-ground:      var(--postie-surface);
  --postie-c-raised:      var(--postie-raised);
  --postie-c-ink:         var(--postie-ink);
  --postie-c-body:        var(--postie-body);
  --postie-c-muted:       var(--postie-muted);
  --postie-c-edge:        var(--postie-edge);
  --postie-c-accent-text: var(--postie-accent-text);
  --postie-c-accent-hover:var(--postie-accent-hover);
  --postie-c-pebble-1:    var(--postie-pebble-1);
  --postie-c-pebble-2:    var(--postie-pebble-2);
  --postie-c-pebble-ink:  var(--postie-pebble-ink);
  --postie-c-selected:    var(--postie-selected);
  --postie-c-select-fill: var(--postie-select-fill);
  --postie-c-select-ink:  var(--postie-select-ink);

  color: var(--postie-ink);
  background-color: var(--postie-surface);
}

/* ---- the brand-ground context: same in both themes ---- */
.postie-brand {
  --postie-c-ground:      var(--postie-ground);
  --postie-c-raised:      var(--postie-raised-brand);
  --postie-c-ink:         var(--postie-ink-brand);
  --postie-c-body:        var(--postie-body-brand);
  --postie-c-muted:       var(--postie-muted-brand);
  --postie-c-edge:        var(--postie-edge-brand);
  --postie-c-accent-text: var(--postie-accent-text-brand);
  --postie-c-accent-hover:var(--postie-accent-hover-brand);
  --postie-c-pebble-1:    var(--postie-raised-brand); /* pebbles on the chrome are one raised-brand step */
  --postie-c-pebble-2:    var(--postie-raised-brand);
  --postie-c-pebble-ink:  var(--postie-ink-brand);
  --postie-c-selected:    var(--postie-raised-brand); /* live chip / accent badge lift over raised-brand */
  --postie-c-select-fill: var(--postie-accent);       /* selected segment is oxblood in both themes */
  --postie-c-select-ink:  var(--postie-accent-ink);
  color: var(--postie-ink-brand);
  background-color: var(--postie-ground);
}

/* ---- the working-ground context, re-entered inside a brand block (paper-preview) ---- */
.postie-working {
  --postie-c-ground:      var(--postie-surface);
  --postie-c-raised:      var(--postie-raised);
  --postie-c-ink:         var(--postie-ink);
  --postie-c-body:        var(--postie-body);
  --postie-c-muted:       var(--postie-muted);
  --postie-c-edge:        var(--postie-edge);
  --postie-c-accent-text: var(--postie-accent-text);
  --postie-c-accent-hover:var(--postie-accent-hover);
  --postie-c-pebble-1:    var(--postie-pebble-1);
  --postie-c-pebble-2:    var(--postie-pebble-2);
  --postie-c-pebble-ink:  var(--postie-pebble-ink);
  --postie-c-selected:    var(--postie-selected);
  --postie-c-select-fill: var(--postie-select-fill);
  --postie-c-select-ink:  var(--postie-select-ink);
  color: var(--postie-ink);
  background-color: var(--postie-surface);
}