/* Planlined UI roles (wired 2026-10-21).

   One app-wide set of semantic colour roles, named with shadcn/ui's role
   vocabulary (background, card, primary, muted, accent, destructive, border,
   input, ring, sidebar) behind a --ui- prefix. The bare names are taken:
   --border, --muted, --accent and --primary are already defined in 56 files
   and read 312 times, so defining them globally would repaint those reads.

   Three rules:
   1. Roles read the slate palette (--pl-*, planlined-slate-theme.css) only.
      This file holds no colour literals.
   2. Every older family is an alias of a role, declared once, here.
   3. A theme (dark, print, a future brand) redefines --pl-* and nothing else.

   Load order: right after planlined-slate-theme.css, everywhere it loads.
   Slate's page-root and .cmf-modal blocks read var(--ui-*), so a page that
   loads slate without this file loses those colours.

   Why it exists, measured live on /cases and /app.html, 2026-10-21:
   - Slate used to repoint --cmf-visual-* only inside ~17 listed page roots.
     Everywhere else the :root defaults in design-tokens.css won: teal
     command #07586b (read by 159 rules), --border-color #e5e7eb (144),
     --success-color #10b981, --accent #0891b2. On app.html 2,168 of ~3,850
     elements resolved the old teal command colour.
   - 132 variable names were read with a literal fallback but defined
     nowhere, so their fallbacks always painted (e.g. --modal-accent fell
     back to violet #6d28d9, --modal-border to #e2e8f0). */

html[data-product-theme='planlined-slate'] {
  /* ---- Roles ----------------------------------------------------------- */
  --ui-background: var(--pl-paper-ground);
  --ui-foreground: var(--pl-text-strong);
  --ui-foreground-secondary: var(--pl-text-muted);
  --ui-card: var(--pl-paper);
  --ui-card-foreground: var(--pl-text-strong);
  --ui-popover: var(--pl-paper);
  --ui-popover-foreground: var(--pl-text-strong);

  /* Primary = the one Signal action per view. Links and selection are the
     command blue (--ui-link / --ui-accent), never Signal. */
  --ui-primary: var(--pl-action);
  --ui-primary-hover: var(--pl-action-hover);
  --ui-primary-foreground: var(--pl-on-ink);
  --ui-secondary: var(--pl-paper-inset);
  --ui-secondary-foreground: var(--pl-text-strong);
  --ui-muted: var(--pl-paper-soft);
  --ui-muted-foreground: var(--pl-text-soft);
  --ui-faint-foreground: var(--pl-text-faint);
  --ui-accent: var(--pl-command-tint);
  --ui-accent-foreground: var(--pl-command);
  --ui-link: var(--pl-command);
  --ui-link-hover: var(--pl-command-hover);
  --ui-destructive: var(--pl-danger-ink);
  --ui-destructive-foreground: var(--pl-on-ink);
  --ui-destructive-muted: var(--pl-danger-tint);
  --ui-destructive-border: var(--pl-danger-border);
  --ui-success: var(--pl-success-ink);
  --ui-success-muted: var(--pl-success-tint);
  --ui-success-border: var(--pl-success-border);
  --ui-warning: var(--pl-warning-ink);
  --ui-warning-muted: var(--pl-warning-tint);
  --ui-warning-border: var(--pl-rule-strong);
  --ui-info: var(--pl-info-ink);
  --ui-info-muted: var(--pl-info-tint);
  --ui-info-border: var(--pl-info-border);
  --ui-border: var(--pl-rule);
  --ui-border-strong: var(--pl-rule-strong);
  --ui-input: var(--pl-rule-strong);
  --ui-ring: var(--pl-focus);
  --ui-sidebar: var(--pl-ink);
  --ui-sidebar-foreground: var(--pl-on-ink);
  --ui-sidebar-muted-foreground: var(--pl-on-ink-muted);
  --ui-sidebar-accent: var(--pl-rail-active);
  --ui-sidebar-border: var(--pl-rail-rule);
  --ui-radius: var(--pl-radius-control);

  /* ---- Kit / CMF roles, now document-wide ------------------------------ */
  --cmf-visual-surface: var(--ui-card);
  --cmf-visual-surface-raised: var(--ui-card);
  --cmf-visual-rail: var(--ui-background);
  --cmf-visual-rule: var(--ui-border);
  --cmf-visual-rule-strong: var(--ui-border-strong);
  --cmf-visual-edge: var(--ui-border-strong);
  --cmf-visual-ink: var(--ui-foreground);
  --cmf-visual-ink-secondary: var(--ui-foreground-secondary);
  --cmf-visual-ink-tertiary: var(--ui-muted-foreground);
  --cmf-visual-header: var(--ui-sidebar);
  --cmf-visual-header-high: var(--pl-ink-warm);
  --cmf-visual-command: var(--ui-link);
  --cmf-visual-command-hover: var(--ui-link-hover);
  --cmf-visual-command-ink: var(--ui-primary-foreground);
  --cmf-visual-command-tint: var(--ui-accent);
  --cmf-visual-command-tint-strong: var(--pl-command-tint-strong);
  --cmf-visual-focus: var(--ui-ring);
  --cmf-visual-signal: var(--ui-primary);
  --cmf-visual-signal-hover: var(--ui-primary-hover);
  --cmf-visual-signal-text: var(--pl-signal-deep);
  --cmf-visual-signal-tint: var(--pl-signal-tint);
  --cmf-visual-staged: var(--pl-ink-warm);
  --cmf-visual-info: var(--ui-info);
  --cmf-visual-info-tint: var(--ui-info-muted);
  --cmf-visual-ready: var(--ui-success);
  --cmf-visual-ready-tint: var(--ui-success-muted);
  --cmf-visual-review: var(--ui-warning);
  --cmf-visual-review-tint: var(--ui-warning-muted);
  --cmf-visual-danger: var(--ui-destructive);
  --cmf-visual-danger-tint: var(--ui-destructive-muted);
  --cmf-accent: var(--ui-link);

  /* Two status families that repeat the same twelve values. */
  --cmf-state-info-bg: var(--ui-info-muted);
  --cmf-state-info-border: var(--ui-info-border);
  --cmf-state-info-ink: var(--ui-info);
  --cmf-state-success-bg: var(--ui-success-muted);
  --cmf-state-success-border: var(--ui-success-border);
  --cmf-state-success-ink: var(--ui-success);
  --cmf-state-warning-bg: var(--ui-warning-muted);
  --cmf-state-warning-border: var(--ui-warning-border);
  --cmf-state-warning-ink: var(--ui-warning);
  --cmf-state-danger-bg: var(--ui-destructive-muted);
  --cmf-state-danger-border: var(--ui-destructive-border);
  --cmf-state-danger-ink: var(--ui-destructive);
  --semantic-state-info-bg: var(--ui-info-muted);
  --semantic-state-info-border: var(--ui-info-border);
  --semantic-state-info-ink: var(--ui-info);
  --semantic-state-success-bg: var(--ui-success-muted);
  --semantic-state-success-border: var(--ui-success-border);
  --semantic-state-success-ink: var(--ui-success);
  --semantic-state-warning-bg: var(--ui-warning-muted);
  --semantic-state-warning-border: var(--ui-warning-border);
  --semantic-state-warning-ink: var(--ui-warning);
  --semantic-state-danger-bg: var(--ui-destructive-muted);
  --semantic-state-danger-border: var(--ui-destructive-border);
  --semantic-state-danger-ink: var(--ui-destructive);

  /* planlined-theme.css spells this one as #fff; under slate that is --pl-on-ink. */
  --semantic-action-on-primary: var(--ui-primary-foreground);

  /* ---- Legacy names still painting the old palette ---------------------
     Defined on :root with teal/Tailwind values, ordered by how many loaded
     rules read them on /cases. */
  --border-color: var(--ui-border);
  --text-color: var(--ui-foreground);
  --text-light: var(--ui-muted-foreground);
  --primary-light: var(--ui-accent);
  --primary-dark: var(--ui-link-hover);
  --app-primary: var(--ui-primary);
  --accent: var(--ui-link);
  --light-gray: var(--ui-muted);
  --success-color: var(--ui-success);
  --color-success: var(--ui-success);
  --danger-color: var(--ui-destructive);
  --color-warning: var(--ui-warning);
  --cmf-wb-warning: var(--ui-warning);
  --cmf-wb-danger: var(--ui-destructive);
  --pl-on-ink-slate: var(--ui-sidebar-muted-foreground);

  /* Not aliased: raw scales (--color-gray-*, --color-neutral-*). A scale
     step has no role, so one alias is wrong somewhere: --color-gray-600 is
     body text on paper and also the Step 5 "Sheets:" label on the ink header
     (#475569 on #172d43, ~1.9:1 today). Fix each call site to a role. */

  /* Read with a literal fallback but defined nowhere, so the fallback
     always paints (measured on /app.html and /cases). */
  --modal-border: var(--ui-border);
  --modal-surface: var(--ui-card);
  --modal-body-bg: var(--ui-card);
  --modal-surface-muted: var(--ui-muted);
  --modal-surface-accent: var(--ui-muted);
  --modal-text-primary: var(--ui-foreground);
  --modal-body-color: var(--ui-foreground);
  --modal-text-secondary: var(--ui-muted-foreground);
  --modal-accent: var(--ui-link);
  --modal-accent-soft: var(--ui-accent);
  --modal-accent-border: var(--pl-command-tint-strong);
  --modal-link: var(--ui-link);
  --hairline: var(--ui-border);
  --card-bg: var(--ui-card);
  --bg-subtle: var(--ui-muted);
  --bg-secondary: var(--ui-muted);
  --bg-tertiary: var(--ui-secondary);
  --hover-bg: var(--ui-muted);
  --text-strong: var(--ui-foreground);
  --cmf-visual-surface-subtle: var(--ui-muted);
  --cmf-matrix-head-bg: var(--ui-muted);
  --cmf-matrix-divider: var(--ui-border);

  /* Left alone on purpose:
     --plan-accent, --rc-role-*: report output themes the user picks.
     --cmf-header-accent (#72dff5), --navy, --sidebar-bg: unclear role,
     needs a design call before aliasing. */
}