/* =============================================================================
   design-tokens.css — Release A shared design tokens (Mediapartizan Workspace)
   FIVE-THEME, SINGLE-SEMANTIC-TOKEN ARCHITECTURE. Extraction, not redesign.

   The application ships ONE semantic token system with FIVE work-focused
   appearance themes, selected by html[data-theme]:

       focus-light   (default)   focus-dark   slate-blue   forest   warm-sand

   Backward compatibility: the legacy values "light" / "dark" are kept as
   aliases of focus-light / focus-dark, so existing localStorage prefs and the
   old two-value selector keep working while the app migrates.

   HOW IT WORKS
   1. Each html[data-theme="…"] block below defines the SAME set of raw theme
      variables (--surface, --text, --accent, --success, --overdue, …). Only the
      VALUES differ between themes.
   2. A single theme-independent :root block (bottom) aliases the semantic
      --mpn-* tokens (the names components reference) to those raw variables, and
      carries the fixed layout / typography / spacing / radii / z-index tokens.
   3. Therefore components reference ONLY semantic names (var(--mpn-*)) and never
      a theme-specific literal colour. Switching html[data-theme] changes
      appearance and nothing else — layout, spacing, type, dimensions, order,
      behaviour, and hierarchy are identical across all five themes.

   Load this AFTER assets/style.css. Selector precedence: a later html[data-theme]
   block overrides style.css's own :root/light/dark. Safe fallback: any unknown
   or absent data-theme value resolves through :root → focus-light.
   ============================================================================= */

/* =========================================================================
   THEME 1 — focus-light  (DEFAULT)
   Calm, highly readable, work-oriented light. Warm-neutral bg, white surfaces,
   dark-neutral (not pure black) text, restrained green accent (D-259), minimal noise.
   ========================================================================= */
:root,
html[data-theme="focus-light"],
html[data-theme="light"]{
  color-scheme:light;
  --page-bg:#f3f4f6;      --bg:var(--page-bg);
  --surface-soft:#f4f5f7; --surface:#ffffff;      --surface-raised:#ffffff;
  --surface-glass:color-mix(in srgb, var(--surface-raised) 86%, transparent);
  --border-subtle:#eceef1; --border-theme:#e3e5e9; --border-strong:#cbced4;
  --text:#1c1f24; --muted-theme:#6b7280; --muted:var(--muted-theme); --text-subtle:#8b909a;
  --input-bg:#ffffff; --header-bg:#1f2228; --header-text:#ffffff; --link-theme:#0b69a3;

  --accent:#2F6B4F; --accent-hover:#265740; --accent-active:#1F4A38;
  --accent-soft:rgba(47,107,79,.12); --accent-border:rgba(47,107,79,.34); --on-accent:#ffffff;
  --secondary:#5b6675; --secondary-hover:#48515e;
  --focus-ring:#2F6B4F;

  --success:#15924c; --success-soft:rgba(16,185,129,.14); --success-fg:#047857;
  --warning:#c2790f; --warning-soft:rgba(245,158,11,.16); --warning-fg:#b45309;
  --danger:#dc2626;  --danger-soft:rgba(239,68,68,.14);   --danger-fg:#b91c1c;
  --info:#2f6f9e;    --info-soft:rgba(59,130,246,.14);     --info-fg:#1d4ed8;
  --ai:#2F6B4F;      --ai-soft:rgba(47,107,79,.12);

  --nav-selected:#1F4A38;        --nav-selected-bg:rgba(47,107,79,.12);
  --workitem-active:#2F6B4F;     --workitem-active-bg:rgba(47,107,79,.10);
  --overdue:#b91c1c;             --overdue-bg:rgba(239,68,68,.10);
  --blocked:#b45309;             --blocked-bg:rgba(245,158,11,.12);
  --decision-required:#1F4A38;   --decision-required-bg:rgba(47,107,79,.12);
  --approval-required:#047857;   --approval-required-bg:rgba(16,185,129,.12);

  --overlay:rgba(15,23,42,.45);
  --shadow-theme:0 8px 24px rgba(15,23,42,.07);
  --shadow-sm:0 4px 14px rgba(15,23,42,.05);
  --shadow:var(--shadow-theme);
  --shadow-lg:0 18px 40px -18px rgba(15,23,42,.4);
}

/* =========================================================================
   THEME 2 — focus-dark
   Charcoal (not pure black), controlled contrast, low eye strain. IDENTICAL
   hierarchy + component behaviour to focus-light; only the palette flips.
   ========================================================================= */
html[data-theme="focus-dark"],
html[data-theme="dark"],
html[data-theme="studio-dark"]{ /* studio-dark → focus-dark (transition alias, Release A §5) */
  color-scheme:dark;
  --page-bg:#15171b;      --bg:var(--page-bg);
  --surface-soft:#23262c; --surface:#1d2025;      --surface-raised:#282c33;
  --surface-glass:color-mix(in srgb, var(--surface-raised) 86%, transparent);
  --border-subtle:#282c33; --border-theme:#343841; --border-strong:#454b54;
  --text:#ecedf0; --muted-theme:#a2a8b2; --muted:var(--muted-theme); --text-subtle:#7c828d;
  --input-bg:#17191d; --header-bg:#101216; --header-text:#f5f6f8; --link-theme:#73c7ff;

  --accent:#7FAE93; --accent-hover:#93BFA5; --accent-active:#6E9A82;
  --accent-soft:rgba(127,174,147,.20); --accent-border:rgba(127,174,147,.42); --on-accent:#1C1A17;
  --secondary:#8790a0; --secondary-hover:#a0a8b6;
  --focus-ring:#7FAE93;

  --success:#22b268; --success-soft:rgba(52,211,153,.16); --success-fg:#34d399;
  --warning:#e0a013; --warning-soft:rgba(251,191,36,.16); --warning-fg:#fbbf24;
  --danger:#e5484d;  --danger-soft:rgba(244,63,94,.16);   --danger-fg:#fca5a5;
  --info:#4b8fd6;    --info-soft:rgba(59,130,246,.18);     --info-fg:#93c5fd;
  --ai:#7FAE93;      --ai-soft:rgba(127,174,147,.20);

  --nav-selected:#93BFA5;        --nav-selected-bg:rgba(127,174,147,.20);
  --workitem-active:#7FAE93;     --workitem-active-bg:rgba(127,174,147,.16);
  --overdue:#fca5a5;             --overdue-bg:rgba(244,63,94,.14);
  --blocked:#fbbf24;             --blocked-bg:rgba(251,191,36,.13);
  --decision-required:#93BFA5;   --decision-required-bg:rgba(127,174,147,.18);
  --approval-required:#34d399;   --approval-required-bg:rgba(52,211,153,.14);

  --overlay:rgba(0,0,0,.6);
  --shadow-theme:0 10px 28px rgba(0,0,0,.28);
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);
  --shadow:var(--shadow-theme);
  --shadow-lg:0 20px 44px -18px rgba(0,0,0,.6);
}

/* =========================================================================
   THEME 3 — slate-blue
   Cool, professional. Slate / cool-gray surfaces, muted steel-blue accent.
   Info stays a cleaner azure so information ≠ accent; AI now follows the single green accent (D-259).
   ========================================================================= */
html[data-theme="slate-blue"]{
  color-scheme:light;
  --page-bg:#e8ecf2;      --bg:var(--page-bg);
  --surface-soft:#eceff5; --surface:#ffffff;      --surface-raised:#ffffff;
  --surface-glass:color-mix(in srgb, var(--surface-raised) 86%, transparent);
  --border-subtle:#e2e7ee; --border-theme:#d1d8e2; --border-strong:#b4bdca;
  --text:#1d2632; --muted-theme:#566270; --muted:var(--muted-theme); --text-subtle:#8a94a2;
  --input-bg:#ffffff; --header-bg:#26333f; --header-text:#f5f7fa; --link-theme:#2563eb;

  --accent:#2F6B4F; --accent-hover:#265740; --accent-active:#1F4A38;
  --accent-soft:rgba(47,107,79,.12); --accent-border:rgba(47,107,79,.34); --on-accent:#ffffff;
  --secondary:#5b6675; --secondary-hover:#48515e;
  --focus-ring:#2F6B4F;

  --success:#157347; --success-soft:rgba(21,128,61,.13); --success-fg:#15703c;
  --warning:#b45309; --warning-soft:rgba(180,83,9,.14);  --warning-fg:#985009;
  --danger:#dc2626;  --danger-soft:rgba(220,38,38,.12);  --danger-fg:#b91c1c;
  --info:#2563eb;    --info-soft:rgba(37,99,235,.13);     --info-fg:#1d4ed8;
  --ai:#2F6B4F;      --ai-soft:rgba(47,107,79,.12);

  --nav-selected:#1F4A38;        --nav-selected-bg:rgba(47,107,79,.12);
  --workitem-active:#2F6B4F;     --workitem-active-bg:rgba(47,107,79,.10);
  --overdue:#b91c1c;             --overdue-bg:rgba(220,38,38,.10);
  --blocked:#985009;             --blocked-bg:rgba(180,83,9,.12);
  --decision-required:#1F4A38;   --decision-required-bg:rgba(47,107,79,.12);
  --approval-required:#15703c;   --approval-required-bg:rgba(21,128,61,.12);

  --overlay:rgba(20,28,40,.5);
  --shadow-theme:0 8px 24px rgba(30,41,59,.10);
  --shadow-sm:0 4px 14px rgba(30,41,59,.07);
  --shadow:var(--shadow-theme);
  --shadow-lg:0 18px 40px -18px rgba(30,41,59,.42);
}

/* =========================================================================
   THEME 4 — forest
   Restrained natural. Sage / muted forest tones, deep pine accent (cool),
   leaf-green success (warm) kept a full hue apart so status stays distinct.
   No saturated decorative green. AI now follows the single green accent (D-259).
   ========================================================================= */
html[data-theme="forest"]{
  color-scheme:light;
  --page-bg:#edefe8;      --bg:var(--page-bg);
  --surface-soft:#e7eae0; --surface:#ffffff;      --surface-raised:#ffffff;
  --surface-glass:color-mix(in srgb, var(--surface-raised) 86%, transparent);
  --border-subtle:#e2e6d9; --border-theme:#d3d8c8; --border-strong:#b9c0a9;
  --text:#22271f; --muted-theme:#5a6153; --muted:var(--muted-theme); --text-subtle:#8b917f;
  --input-bg:#ffffff; --header-bg:#263029; --header-text:#f3f6ef; --link-theme:#345d84;

  --accent:#2F6B4F; --accent-hover:#265740; --accent-active:#1F4A38;
  --accent-soft:rgba(47,107,79,.12); --accent-border:rgba(47,107,79,.34); --on-accent:#ffffff;
  --secondary:#5a6153; --secondary-hover:#474d42;
  --focus-ring:#2F6B4F;

  --success:#3f7d34; --success-soft:rgba(63,125,52,.14); --success-fg:#35692c;
  --warning:#b06f12; --warning-soft:rgba(176,111,18,.15); --warning-fg:#9a5f0f;
  --danger:#c0392b;  --danger-soft:rgba(192,57,43,.13);   --danger-fg:#a3271b;
  --info:#3f6f9e;    --info-soft:rgba(63,111,158,.13);     --info-fg:#345d84;
  --ai:#2F6B4F;      --ai-soft:rgba(47,107,79,.12);

  --nav-selected:#1F4A38;        --nav-selected-bg:rgba(47,107,79,.12);
  --workitem-active:#2F6B4F;     --workitem-active-bg:rgba(47,107,79,.10);
  --overdue:#a3271b;             --overdue-bg:rgba(192,57,43,.11);
  --blocked:#9a5f0f;             --blocked-bg:rgba(176,111,18,.13);
  --decision-required:#1F4A38;   --decision-required-bg:rgba(47,107,79,.12);
  --approval-required:#35692c;   --approval-required-bg:rgba(63,125,52,.13);

  --overlay:rgba(22,30,24,.5);
  --shadow-theme:0 8px 24px rgba(30,41,30,.10);
  --shadow-sm:0 4px 14px rgba(30,41,30,.07);
  --shadow:var(--shadow-theme);
  --shadow-lg:0 18px 40px -18px rgba(30,41,30,.42);
}

/* =========================================================================
   THEME 5 — warm-sand
   Warm neutral. Sand / cream / warm-gray surfaces, restrained terracotta
   accent. Danger stays a cool crimson and warning a gold so the three warm
   hues never collide. Professional, non-decorative. AI now follows the single green accent (D-259).
   ========================================================================= */
html[data-theme="warm-sand"]{
  color-scheme:light;
  --page-bg:#f2ebe0;      --bg:var(--page-bg);
  --surface-soft:#ece3d5; --surface:#fffdf8;      --surface-raised:#fffdf8;
  --surface-glass:color-mix(in srgb, var(--surface-raised) 86%, transparent);
  --border-subtle:#eae1d3; --border-theme:#ddd2c1; --border-strong:#c8bba4;
  --text:#2a241d; --muted-theme:#6d6355; --muted:var(--muted-theme); --text-subtle:#9a8f7d;
  --input-bg:#fffdf8; --header-bg:#33291f; --header-text:#f6f0e6; --link-theme:#345d84;

  --accent:#2F6B4F; --accent-hover:#265740; --accent-active:#1F4A38;
  --accent-soft:rgba(47,107,79,.12); --accent-border:rgba(47,107,79,.34); --on-accent:#ffffff;
  --secondary:#6d6355; --secondary-hover:#564e43;
  --focus-ring:#2F6B4F;

  --success:#3f7d47; --success-soft:rgba(63,125,71,.14); --success-fg:#35693c;
  --warning:#9a7016; --warning-soft:rgba(154,112,22,.16); --warning-fg:#855f10;
  --danger:#c0322b;  --danger-soft:rgba(192,50,43,.13);   --danger-fg:#a3251f;
  --info:#3f6f9e;    --info-soft:rgba(63,111,158,.13);     --info-fg:#345d84;
  --ai:#2F6B4F;      --ai-soft:rgba(47,107,79,.12);

  --nav-selected:#1F4A38;        --nav-selected-bg:rgba(47,107,79,.12);
  --workitem-active:#2F6B4F;     --workitem-active-bg:rgba(47,107,79,.10);
  --overdue:#a3251f;             --overdue-bg:rgba(192,50,43,.11);
  --blocked:#855f10;             --blocked-bg:rgba(154,112,22,.14);
  --decision-required:#1F4A38;   --decision-required-bg:rgba(47,107,79,.12);
  --approval-required:#35693c;   --approval-required-bg:rgba(63,125,71,.13);

  --overlay:rgba(45,35,24,.45);
  --shadow-theme:0 8px 24px rgba(58,44,30,.10);
  --shadow-sm:0 4px 14px rgba(58,44,30,.07);
  --shadow:var(--shadow-theme);
  --shadow-lg:0 18px 40px -18px rgba(58,44,30,.42);
}

/* =========================================================================
   SEMANTIC --mpn-* ALIAS LAYER  (theme-independent)
   Components reference ONLY these names. Each colour aliases a raw theme var
   above, so every --mpn-* token flips automatically with html[data-theme].
   Fixed layout / type / spacing / radii / z tokens carry theme-independent
   values. Fallbacks fire only if a raw theme var is somehow absent.
   ========================================================================= */
:root{
  /* --- surfaces / borders --- */
  --mpn-bg:             var(--bg,             #f3f4f6);
  --mpn-surface-soft:   var(--surface-soft,   #f4f5f7);  /* secondary background */
  --mpn-surface:        var(--surface,        #ffffff);  /* surface             */
  --mpn-surface-raised: var(--surface-raised, #ffffff);  /* elevated surface    */
  --mpn-border-subtle:  var(--border-subtle,  #eceef1);  /* subtle border       */
  --mpn-border:         var(--border-theme,   #e3e5e9);  /* border              */
  --mpn-border-strong:  var(--border-strong,  #cbced4);
  --mpn-input-bg:       var(--input-bg,       #ffffff);
  --mpn-header-bg:      var(--header-bg,       #1f2228);
  --mpn-header-tx:      var(--header-text,     #ffffff);

  /* --- text --- */
  --mpn-tx:   var(--text,        #1c1f24);   /* primary text   */
  --mpn-tx-2: var(--muted,       #6b7280);   /* secondary text */
  --mpn-tx-3: var(--text-subtle, #8b909a);   /* muted text — DECORATIVE only, never meaning-bearing */
  --mpn-link: var(--link-theme,  #0b69a3);

  /* --- interactive accent --- */
  --mpn-accent:        var(--accent,        #2F6B4F);
  --mpn-accent-hover:  var(--accent-hover,  #265740);   /* accent hover  */
  --mpn-accent-active: var(--accent-active, #1F4A38);   /* accent active */
  --mpn-accent-tint:   var(--accent-soft,   rgba(47,107,79,.12));
  --mpn-accent-line:   var(--accent-border, rgba(47,107,79,.34));
  --mpn-on-accent:     var(--on-accent,     #ffffff);

  /* --- focus ring --- */
  --mpn-focus-ring: var(--focus-ring, var(--accent, #2F6B4F));
  --mpn-focus: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--mpn-focus-ring);

  /* --- semantic status --- */
  --mpn-success:      var(--success-fg, #047857);  --mpn-success-tint: var(--success-soft, rgba(16,185,129,.14));
  --mpn-warning:      var(--warning-fg, #b45309);  --mpn-warning-tint: var(--warning-soft, rgba(245,158,11,.16));
  --mpn-danger:       var(--danger-fg,  #b91c1c);  --mpn-danger-tint:  var(--danger-soft,  rgba(239,68,68,.14));
  --mpn-info:         var(--info-fg,    #1d4ed8);  --mpn-info-tint:    var(--info-soft,    rgba(59,130,246,.14));
  --mpn-ai:           var(--ai,         #2F6B4F);  --mpn-ai-tint:      var(--ai-soft,      rgba(47,107,79,.12));

  /* --- workspace-domain semantics --- */
  --mpn-nav-selected:      var(--nav-selected,      #1F4A38);  --mpn-nav-selected-bg:      var(--nav-selected-bg,      rgba(47,107,79,.12));
  --mpn-workitem-active:   var(--workitem-active,   #2F6B4F);  --mpn-workitem-active-bg:   var(--workitem-active-bg,   rgba(47,107,79,.10));
  --mpn-overdue:           var(--overdue,           #b91c1c);  --mpn-overdue-bg:           var(--overdue-bg,           rgba(239,68,68,.10));
  --mpn-blocked:           var(--blocked,           #b45309);  --mpn-blocked-bg:           var(--blocked-bg,           rgba(245,158,11,.12));
  --mpn-decision:          var(--decision-required, #1F4A38);  --mpn-decision-bg:          var(--decision-required-bg, rgba(47,107,79,.12));
  --mpn-approval:          var(--approval-required, #047857);  --mpn-approval-bg:          var(--approval-required-bg, rgba(16,185,129,.12));

  /* --- shadows / overlay --- */
  --mpn-shadow-sm:    var(--shadow-sm, 0 4px 14px rgba(15,23,42,.05));
  --mpn-shadow-menu:  var(--shadow,    0 8px 24px rgba(15,23,42,.07));
  --mpn-shadow-modal: var(--shadow-lg, 0 18px 40px -18px rgba(15,23,42,.4));
  --mpn-overlay:      var(--overlay,   rgba(15,23,42,.45));

  /* --- typography (theme-independent) --- */
  --mpn-font:       'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mpn-fs-eyebrow: 11px;  --mpn-fs-meta: 12px;  --mpn-fs-body: 13px;  --mpn-fs-row: 14px;
  --mpn-fs-h3:      18px;  --mpn-fs-h2:   20px;  --mpn-fs-h1:   24px;  --mpn-fs-display: 30px;
  --mpn-lh-tight:   1.35;  --mpn-lh-body: 1.6;
  --mpn-fw-regular: 400;   --mpn-fw-medium: 500; --mpn-fw-semibold: 600; --mpn-fw-bold: 700;

  /* --- spacing --- */
  --mpn-sp-1:4px; --mpn-sp-2:8px; --mpn-sp-3:12px; --mpn-sp-4:16px; --mpn-sp-5:24px; --mpn-sp-6:32px;

  /* --- layout dimensions (theme-independent) --- */
  --mpn-content-max:1360px; --mpn-content-narrow:760px;
  --mpn-nav-w:212px; --mpn-nav-w-collapsed:64px;
  --mpn-topbar-h:54px; --mpn-mobilenav-h:64px; --mpn-mobile-w:390px;

  /* --- controls --- */
  --mpn-control-h:40px; --mpn-control-h-sm:32px; --mpn-tap-min:44px;

  /* --- radii --- */
  --mpn-r-sm:7px; --mpn-r-md:8px; --mpn-r-lg:10px; --mpn-r-xl:13px; --mpn-r-pill:999px;

  /* --- transitions --- */
  --mpn-t-fast:.14s ease; --mpn-t-base:.2s ease;

  /* --- z-index layers --- */
  --mpn-z-nav:40; --mpn-z-notif:55; --mpn-z-search:60; --mpn-z-overlay:70; --mpn-z-toast:80;
}

/* =============================================================================
   NOTES
   • Theme selectors (exact, used by the app): html[data-theme="focus-light" |
     "focus-dark" | "slate-blue" | "forest" | "warm-sand"]. Legacy "light" /
     "dark" alias focus-light / focus-dark. theme.js writes the value; any
     unknown value falls back through :root to focus-light.
   • WCAG AA: the SINGLE green accent (light #2F6B4F / dark #7FAE93) with its
     `--mpn-on-accent` pair reaches ≥4.5:1 for primary-button text (`--mpn-on-accent`
     on `--mpn-accent`) and the selected-nav label in ALL five themes.
     `--mpn-on-accent` differs per world: white on the dark-green light-theme accent;
     dark ink #1C1A17 on the light-green dark-theme accent. The selected-nav label uses
     the darker `accent-active` green for legibility on its tint. Accent is no longer
     theme-dependent — one green everywhere (D-259); the warm surface world stays theme-driven.
   • Status distinction is never colour-alone: every status/type is rendered as
     ICON + LABEL (see 06). The five must-be-unambiguous semantics — success,
     warning, danger, info, AI — are held to distinct hue families in ALL five
     themes; overdue→danger, blocked→warning, decision→accent, approval→success
     derive from those and are additionally separated by icon + label.
   • Nothing here is theme-forced: every --mpn-* colour aliases a raw theme var
     that flips under html[data-theme]. Only layout/type/space/radii/z are fixed.
   • Breakpoints (documentation — @media cannot read var()):
       >=1440  expanded rail (212px)
       <1280   collapsed rail (64px)
       <768    overlay drawer + bottom nav
       <=390   mobile: bottom 5-tab, stacked cards
   ============================================================================= */

/* ============================================================================
   Stabilization hotfix (D3): LEGACY COMPONENT COMPATIBILITY LAYER.
   style.css ships hard-coded light surfaces (.card #fff, table #fff, th #f8fafc,
   .admin-tab #fff/#1f2228, .sticky-save rgba(255,255,255,.96), light notices…).
   Under the five v2 themes the body text flips per theme while those surfaces
   stayed white → unreadable white-on-white (admin/user-account screens).
   This layer re-maps the legacy selectors to the SAME semantic --mpn-* tokens
   the shell uses. It loads only under APP_SHELL_V2 (render_theme_head v2 branch),
   AFTER style.css, so flag-off legacy rendering is untouched and no theme is
   redefined — every value below flips automatically with html[data-theme].
   ============================================================================ */

body{ background:var(--mpn-bg); color:var(--mpn-tx); }
.card,.block,.subitem,.summary-card,.leave-card,.kpi,.choice-group,.check-card,
.focus-prompt-card,.draft-status,.interruption{
  background:var(--mpn-surface); border-color:var(--mpn-border); color:var(--mpn-tx);
}
.block[data-collapsed="true"]{ background:var(--mpn-surface-soft); }
.muted,.small,.field-help,.kpi span,.summary-card span,.leave-balance span{ color:var(--mpn-tx-2); }

/* tables: header + rows readable in every theme; no hard-coded white */
table{ background:var(--mpn-surface); color:var(--mpn-tx); }
th{ background:var(--mpn-surface-soft); color:var(--mpn-tx); }
th,td{ border-color:var(--mpn-border); }
.new-row{ background:var(--mpn-success-tint); }

/* form controls (fields, selects, textareas, checkboxes stay visible) */
input,select,textarea{ background:var(--mpn-input-bg,var(--mpn-surface)); border-color:var(--mpn-border); color:var(--mpn-tx); }
input:disabled,select:disabled,textarea:disabled,button:disabled{ opacity:.55; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none; box-shadow:var(--mpn-focus); }
label{ color:var(--mpn-tx); }
.segmented label,.focus-options button{ background:var(--mpn-surface); border-color:var(--mpn-border); color:var(--mpn-tx); }
.segmented label:hover,.focus-options button:hover{ background:var(--mpn-surface-soft); }

/* buttons: base action follows the accent + on-accent pair (guaranteed >=4.5:1 per theme) */
.btn{ background:var(--mpn-accent); color:var(--mpn-on-accent); }
.btn:hover{ background:var(--mpn-accent-hover); }

/* buttons that were hard-coded light */
.btn.light,.block-toggle{ background:var(--mpn-surface-soft); color:var(--mpn-tx); }
.btn.light:hover,.block-toggle:hover{ background:var(--mpn-border-subtle); }

/* admin tab bar: token accent for the selected tab (was #1f2228-on-#fff) */
.admin-tab{ background:var(--mpn-surface); color:var(--mpn-tx); border-color:var(--mpn-border); }
.admin-tab:hover{ background:var(--mpn-surface-soft); }
.admin-tab.active{ background:var(--mpn-accent); color:var(--mpn-on-accent); border-color:var(--mpn-accent); }

/* fixed save bar: opaque themed surface — no white veil / dark halo over content */
.sticky-save{ background:var(--mpn-surface-raised); border-top-color:var(--mpn-border); backdrop-filter:none; }

/* notices keep semantic tints with theme-safe text */
.notice{ background:var(--mpn-info-tint); border-left-color:var(--mpn-info); color:var(--mpn-tx); }
.warning{ background:var(--mpn-warning-tint); border-left-color:var(--mpn-warning); color:var(--mpn-tx); }
.success{ background:var(--mpn-success-tint); border-left-color:var(--mpn-success); color:var(--mpn-tx); }
.danger-text{ color:var(--mpn-danger); }
.kpi-alert{ border-color:var(--mpn-danger); background:var(--mpn-danger-tint); }
.result-item{ background:var(--mpn-surface-soft); border-left-color:var(--mpn-info); }
.metric-list li{ border-color:var(--mpn-border); }

/* full-screen prompts: themed card, backdrop stays translucent only WHILE open ([hidden] kills it) */
.focus-prompt{ background:rgba(0,0,0,.55); }
.focus-prompt[hidden]{ display:none; }