/* Postie — WORKING token set (P3 iterations 1–4).
   Values: BRIEF.md §4a + phase-2/pairings.md (colourway 4, both themes, computed).
   This file is the working set the components build against. It is NOT the canonical
   tokens/*.css — those are written out from this set at iteration 5, after the green-light.
   A value that must change is a P2 regression: fix here, re-test consumers, then formalise.

   Two grounds, two roles (ground-role-split):
     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.

   Components read the CONTEXT tokens (--postie-c-*). The context is set by the ground
   the component sits on: the theme scope sets the working context; `.postie-brand`
   (Panel tone="brand", ChromeBar, Masthead, StatTile tone="brand") sets the brand one;
   `.postie-working` re-enters the working one inside a brand block. A component NEVER
   writes a `.postie-brand <x>` descendant rule — that rule would out-rank the re-entry.
   Every ground-dependent role, including pebble steps and the selected / select fills,
   is a context token, so the three context blocks below are the whole mechanism.
   A theme block APPLIES color + background-color; it never only remaps. */

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

  /* ---- brand ground (theme-invariant) ---- */
  --postie-ground:              #1F1D1E;
  --postie-ink-brand:           #F1ECEC; /* on: --postie-ground 14.33 · --postie-raised-brand */
  --postie-body-brand:          #C7BEBF; /* on: --postie-ground 9.22 */
  --postie-muted-brand:         #978C8D; /* on: --postie-ground 5.15 · --postie-raised-brand 4.62 (light) */
  --postie-accent-text-brand:   #E4606C; /* on: --postie-ground 4.94 */
  --postie-accent-hover-brand:  #EE7A85; /* on: --postie-ground */
  --postie-edge-brand:          #978C8D; /* ghost-button edge on brand ground (5.15, clears 3:1) */
  --postie-raised-brand:        #141213; /* search well, avatar, chips on brand ground */

  /* ---- working ground (dark) ---- */
  --postie-surface:             #111011;
  --postie-raised:              #1A1819;
  --postie-selected:            #231B1D;
  --postie-rule:                #2A2526; /* decorative, dense tables only — never a UI edge */
  --postie-edge:                #6E6566; /* on: --postie-surface 3.36 — the only visible UI border */
  --postie-pebble-1:            #2F292A;
  --postie-pebble-2:            #3D3536;
  --postie-pebble-ink:          #F1ECEC; /* on: pebble-1 12.20 · pebble-2 10.19 */
  --postie-ink:                 #ECE7E7; /* on: --postie-surface 15.51 · raised 14.43 · selected 13.76 */
  --postie-body:                #BBB2B3; /* on: --postie-surface 9.16 · raised 8.52 · selected 8.13 */
  --postie-muted:               #8F8586; /* on: --postie-surface 5.30 · raised 4.94 · selected 4.71 */
  --postie-accent:              #8A1E2B; /* FILL only on dark */
  --postie-accent-ink:          #F6EDED; /* on: --postie-accent 7.93 */
  --postie-accent-text:         #E4606C; /* on: --postie-surface 5.60 · selected 4.97 */
  --postie-accent-hover:        #EE7A85; /* on: --postie-surface 7.01 */

  /* ---- derived roles (theme-specific by rule) ---- */
  --postie-triage:              #231B1D; /* triage-band: tint on dark */
  --postie-triage-ink:          #ECE7E7;
  --postie-triage-signal:       #E4606C; /* dot + link on the band */
  --postie-select-fill:         #1F1D1E; /* selected segment on working: charcoal on dark */
  --postie-select-ink:          #F1ECEC;

  /* ---- type (nunito-pair) ---- */
  --postie-font-display: 'Nunito', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --postie-font-ui:      'Nunito Sans', 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --postie-font-mono:    ui-monospace, Menlo, Consolas, monospace;
  --postie-weight-display: 800;
  --postie-tracking-display: -0.03em;
  --postie-tracking-label: 0.14em;

  /* ---- shape ---- */
  --postie-radius-row:   12px;
  --postie-radius-panel: 16px;
  --postie-radius-pill:  999px;
  --postie-edge-width:   1.5px;

  /* ---- spacing (packed, base 4) ---- */
  --postie-space-1: 4px;  --postie-space-2: 8px;  --postie-space-3: 12px;
  --postie-space-4: 16px; --postie-space-5: 20px; --postie-space-6: 24px;
  --postie-gap-section: 32px;

  /* ---- motion ---- */
  --postie-duration: 180ms;
  --postie-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- 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);
  font-family: var(--postie-font-ui);
  font-variant-numeric: tabular-nums;
}

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

  /* brand ground: identical to dark — dark chrome over paper */
  --postie-raised-brand:        #282627; /* a lighter step of the chrome; ink-brand 12.85 · body-brand 8.27 · muted-brand 4.62 */

  /* working ground (paper) */
  --postie-surface:             #FBFAFA;
  --postie-raised:              #EEEDED;
  --postie-selected:            #F2DCDF;
  --postie-rule:                #E4E2E2;
  --postie-edge:                #8A8788; /* on: paper 3.42 · raised 3.05 */
  --postie-pebble-1:            #DAD8D8;
  --postie-pebble-2:            #C7C4C5;
  --postie-pebble-ink:          #141314; /* on: pebble-1 13.06 · pebble-2 10.71 */
  --postie-ink:                 #141314; /* on: paper 17.79 · raised 15.86 · selected 14.19 */
  --postie-body:                #4A4849; /* on: paper 8.71 · raised 7.77 · selected 6.95 */
  --postie-muted:               #646162; /* on: paper 5.88 · raised 4.72 · selected 4.69 */
  --postie-accent:              #8A1E2B; /* FILL for the primary moments on light */
  --postie-accent-ink:          #F6EDED;
  --postie-accent-text:         #8A1E2B; /* on: paper 8.76 · raised 7.81 · selected 6.99 */
  --postie-accent-hover:        #6F1622; /* on: paper 11.11 */

  --postie-triage:              #8A1E2B; /* triage-band: oxblood FILL on light */
  --postie-triage-ink:          #F6EDED;
  --postie-triage-signal:       #F6EDED;
  --postie-select-fill:         #8A1E2B; /* selected segment on working: oxblood on light */
  --postie-select-ink:          #F6EDED;

  --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);
}

@media (prefers-reduced-motion: reduce) {
  :root { --postie-duration: 0ms; }
}