/* Shared Planlined theme roles for page and overlay hosts. */

html[data-product-theme^='planlined'] {
  --pl-ink: #1c2230;
  --pl-ink-warm: #262e41;
  --pl-ink-deep: #0b0e15;

  /* Fourth ink step and the hairline that goes with it. The sidebar had both
     already but spelled inline: --sidebar-border is this same warm 20% rule,
     and the rail needs a hover surface one step above --pl-ink-warm, which
     the ramp stopped short of. Naming them is what lets the rail and the
     sidebar share one definition instead of two literals that drift. */
  --pl-rail-raised: #323c54;
  --pl-rail-rule: rgb(255 201 188 / 20%);
  --pl-paper: #fbf8f1;
  --pl-paper-soft: #faf7f0;
  --pl-paper-ground: #f6f4ef;
  --pl-paper-inset: #f1ede4;

  /* Sunk/mark grounds and the third ink tier. DESIGN.md's paper ramp had
     only three steps in this layer; the plan register needs a recessed header
     band (sunk), a caution wash (mark) and a body-text weight between --pl-ink
     and --pl-text-muted. */
  --pl-paper-sunk: #f2efe8;
  --pl-paper-mark: #f5efe0;
  --pl-text-strong: #3c4453;
  --pl-shadow-warm: rgb(66 26 16 / 8%);
  --pl-rule: #e5e1d8;
  --pl-rule-strong: #b9b3a8;
  --pl-signal: #c8402a;
  --pl-signal-deep: #a63320;
  --pl-action: #8e2d21;
  --pl-action-hover: #782319;
  --pl-action-tint: #f8e8e3;
  --pl-signal-tint: #ffc9bc;

  /* Two roles DESIGN.md names but this file never defined, so every caller
     spelled the literal instead.

     --pl-margin-rule is DESIGN.md's `margin-rule`. It measures 4.42:1 on ink
     and therefore FAILS AA as text — DESIGN.md calls that trap out by name.
     It is defined here as what it actually is: a STROKE colour. Use it for
     rules and fills; use --pl-signal-tint (10.9:1) for red-ish text on ink.

     --pl-savings-on-ink is the on-ink member of the savings family. --pl-savings
     is tuned for paper (6.02:1) and collapses to about 2:1 on --pl-ink, which is
     why the Step 5 save badge had been painting Tailwind's #4ade80 instead.
     Measured 7.0:1 on --pl-ink. */
  --pl-margin-rule: #e8553d;
  --pl-savings-on-ink: #5fbd93;
  --pl-danger-on-ink: #f0a695;
  --pl-danger-on-ink: #f0a695;

  /* Primary tier for text on ink. This was NEVER defined: every caller — this
     product's rails and the organizations page's own — reads
     `var(--pl-on-ink, #faf7f0)`, so the literal fallback was doing all the work
     and the token was a name with nothing behind it. Defined here to exactly
     that literal, so the value on screen does not move and the role becomes
     real. Measured 14.6:1 on --pl-ink. */
  --pl-on-ink: #faf7f0;

  /* design-tokens.css sets these cool (#e6ebf0 on #718093) for CMF's own
     palette; against this theme's warm paper every disabled control read as a
     foreign grey. Replacing the VALUES fixes every variant at once — primary,
     secondary, danger, link and base all flow through CMF's existing
     `.cmf-btn:disabled` rule — which is what a theme is for: "Theme changes
     replace these values. They do not change component geometry, markup,
     spacing, or typography."

     At the theme ROOT, not in the .cmf-overlay block below: those 24 overrides
     are scoped to a modal, and a disabled button on a page never matches them.
     Measured 4.63:1, clear of AA even though disabled controls are exempt. */
  --cmf-visual-disabled-surface: var(--pl-rule);
  --cmf-visual-disabled-ink: var(--pl-text-soft);
  --pl-on-ink-muted: #c9cdd6;
  --pl-on-ink-soft: var(--pl-on-ink-muted);

  /* Secondary tier for text on ink. DESIGN.md measures on-ink-slate at
     7.2:1 on --pl-ink; the rails that needed it were writing the
     navy-era #d3e3f5 literal instead. */
  --pl-on-ink-slate: #a7b0c0;
  --pl-text-muted: #475060;
  --pl-text-soft: #5b6373;
  --pl-savings: #1f6b4d;
  --pl-info-ink: #173f9f;
  --pl-success-ink: #14532d;
  --pl-warning-ink: #5f3300;
  --pl-danger-ink: #7f1d1d;
  --pl-danger-border: #d7aaa4;
  --pl-danger-tint: #fbedeb;
  --pl-danger-tint-strong: #f7dfdc;
  --pl-focus: rgb(200 64 42 / 28%);
  --font-ui: 'Sora', ui-sans-serif, -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --font-sans: var(--font-ui);
  --font-document: var(--font-ui);
  --brand-primary: var(--pl-action);
  --brand-primary-hover: var(--pl-action-hover);
  --brand-primary-dark: var(--pl-action-hover);
  --brand-primary-light: #f8e8e3;
  --brand-primary-lighter: #fdf2ef;
  --brand-primary-ring: var(--pl-focus);

  /* Compatibility bridge for legacy bodies that predate --brand-* and the
     cross-renderer semantic contract. Remove aliases as those bodies migrate. */
  --primary-color: var(--pl-action);
  --primary-color-hover: var(--pl-action-hover);
  --primary-color-rgb: 142, 45, 33;
  --admin-brand-primary: var(--pl-action);
  --admin-brand-primary-dark: var(--pl-action-hover);
  --vui-primary: var(--pl-action);
  --vui-primary-hover: var(--pl-action-hover);
  --surface-primary: var(--pl-paper);
  --surface-secondary: var(--pl-paper-ground);
  --surface-tertiary: var(--pl-paper-inset);
  --surface-white: var(--pl-paper);
  --surface-1: var(--pl-paper);
  --surface-2: var(--pl-paper-ground);
  --surface-3: var(--pl-paper-inset);
  --surface-hover: #f3eee5;
  --border-subtle: var(--pl-rule);
  --border-default: var(--pl-rule-strong);
  --border-light: var(--pl-rule);
  --border-emphasis: #8d877d;
  --text-primary: var(--pl-ink);
  --text-secondary: var(--pl-text-muted);
  --text-tertiary: var(--pl-text-soft);
  --text-muted: var(--pl-text-soft);
  --text-placeholder: #6b7280;
  --input-focus-border: var(--pl-focus-stroke, var(--pl-signal));
  --input-focus-shadow: 0 0 0 3px var(--pl-focus);
  --designation-proposed: var(--pl-signal);
  --designation-proposed-bg: #fbe9e4;
  --designation-proposed-border: #d78c7c;
  --semantic-surface-canvas: var(--pl-paper);
  --semantic-surface-subtle: var(--pl-paper-ground);
  --semantic-surface-inset: var(--pl-paper-inset);
  --semantic-surface-selected: var(--pl-action-tint);
  --semantic-border-subtle: var(--pl-rule);
  --semantic-border-strong: var(--pl-rule-strong);
  --semantic-text-primary: var(--pl-ink);
  --semantic-text-secondary: var(--pl-text-muted);
  --semantic-text-tertiary: var(--pl-text-soft);
  --semantic-action-primary: var(--pl-action);
  --semantic-action-primary-hover: var(--pl-action-hover);
  --semantic-action-on-primary: #fff;
  --semantic-focus-ring: var(--pl-focus);
  --semantic-state-info-bg: #edf3f8;
  --semantic-state-info-border: #b8cade;
  --semantic-state-info-ink: var(--pl-info-ink);
  --semantic-state-success-bg: #ebf4ef;
  --semantic-state-success-border: #afd3c0;
  --semantic-state-success-ink: var(--pl-success-ink);
  --semantic-state-warning-bg: #fbf1e5;
  --semantic-state-warning-border: #dec49d;
  --semantic-state-warning-ink: var(--pl-warning-ink);
  --semantic-state-danger-bg: var(--pl-danger-tint);
  --semantic-state-danger-border: var(--pl-danger-border);
  --semantic-state-danger-ink: var(--pl-danger-ink);

  color: var(--pl-ink);
  background: var(--pl-paper-ground);
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] body,
html[data-product-theme^='planlined'] :is(button, input, select, textarea) {
  font-family: var(--font-ui);
}

html[data-product-theme^='planlined'] body {
  color: var(--pl-ink);
  background-color: var(--pl-paper-ground);
}

html[data-product-theme^='planlined'] :where(input, select, textarea) {
  color: var(--pl-ink);
  border-color: var(--pl-rule-strong);
  background-color: var(--pl-paper);
}

html[data-product-theme^='planlined']
  :where(input, select, textarea):not([disabled]):focus-visible {
  border-color: var(--pl-focus-stroke, var(--pl-signal)) !important;
  outline: 2px solid var(--pl-focus-stroke, var(--pl-signal)) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--pl-focus) !important;
}
html[data-product-theme^='planlined'] [data-page-shell-host],
html[data-product-theme^='planlined']
  :is(
    #wizard-root,
    #cases-root,
    #benefit-guide-root,
    #plans-root,
    #shared-links-root,
    #documents-root,
    #what-if-root,
    #renewal-root,
    #oasis-root,
    #oasis-root,
    #implementation-root,
    .implementation-export-document,
    #storage-root,
    #aca-marketplace-root,
    #feedback-root,
    #account-root,
    #organizations-root
  ),
html[data-product-theme^='planlined'] [data-ui-overlay-host] {
  /* Modal-local compatibility boundary. Workspace/report appearance controls
     write legacy aliases inline on <html>; redefining them on the shell keeps
     CMF and Vue-kit bodies on product semantics without disabling those
     controls elsewhere in the application. */
  --primary-color: var(--semantic-action-primary);
  --primary-color-hover: var(--semantic-action-primary-hover);
  --primary-dark: var(--semantic-action-primary-hover);
  --primary-color-rgb: 142, 45, 33;
  --accent: var(--semantic-action-primary);
  --accent-hover: var(--semantic-action-primary-hover);
  --accent-color: var(--semantic-action-primary);
  --info-color: var(--semantic-state-info-ink);
  --brand-primary: var(--semantic-action-primary);
  --brand-primary-hover: var(--semantic-action-primary-hover);
  --brand-primary-dark: var(--semantic-action-primary-hover);
  --admin-brand-primary: var(--semantic-action-primary);
  --admin-brand-primary-dark: var(--semantic-action-primary-hover);
  --vui-primary: var(--semantic-action-primary);
  --vui-primary-hover: var(--semantic-action-primary-hover);
  --cmfb-surface: var(--semantic-surface-canvas);
  --cmfb-surface-2: var(--semantic-surface-subtle);
  --cmfb-rail: var(--semantic-surface-subtle);
  --cmfb-border: var(--semantic-border-subtle);
  --cmfb-border-2: var(--semantic-border-strong);
  --cmfb-ink: var(--semantic-text-primary);
  --cmfb-ink-2: var(--semantic-text-secondary);
  --cmfb-ink-3: var(--semantic-text-tertiary);
  --cmfb-blue: var(--semantic-action-primary);
  --cmfb-blue-dark: var(--semantic-action-primary-hover);
  --cmfb-icon-bg: var(--semantic-surface-inset);
  --cmfb-icon-current: var(--semantic-surface-selected);
  --cmfb-ok-bg: var(--semantic-state-success-bg);
  --cmfb-ok-bd: var(--semantic-state-success-border);
  --cmfb-ok-ink: var(--semantic-state-success-ink);
  --cmfb-warn-bg: var(--semantic-state-warning-bg);
  --cmfb-warn-bd: var(--semantic-state-warning-border);
  --cmfb-warn-ink: var(--semantic-state-warning-ink);
  --cmfb-dang-bg: var(--semantic-state-danger-bg);
  --cmfb-dang-bd: var(--semantic-state-danger-border);
  --cmfb-dang-ink: var(--semantic-state-danger-ink);
  --cmfb-info-bg: var(--semantic-state-info-bg);
  --cmfb-info-bd: var(--semantic-state-info-border);
  --cmfb-info-ink: var(--semantic-state-info-ink);
  --cmfb-staged: var(--pl-signal);
  --cmfb-slab: var(--pl-ink);
  --cmfb-slab-high: var(--pl-ink-warm);
  --cmfb-slab-accent: var(--pl-signal-tint);
  --cmf-visual-header: var(--pl-ink);
  --cmf-visual-header-high: var(--pl-ink-warm);
  --cmf-header-ink: var(--pl-paper-soft);
  --cmf-header-ink-secondary: #c9cdd6;
  --cmf-header-accent: var(--pl-signal-tint);
  --cmf-header-edge: rgb(255 201 188 / 32%);
  --cmf-header-tile: rgb(255 248 241 / 8%);
  --cmf-header-tile-hover: rgb(255 248 241 / 14%);
  --cmf-visual-surface: var(--pl-paper);
  --cmf-visual-surface-raised: #fffdf8;
  --cmf-visual-rail: var(--pl-paper-ground);
  --cmf-visual-rule: var(--pl-rule);
  --cmf-visual-rule-strong: var(--pl-rule-strong);
  --cmf-visual-edge: #8d877d;
  --cmf-visual-ink: var(--pl-ink);
  --cmf-visual-ink-secondary: var(--pl-text-muted);
  --cmf-visual-ink-tertiary: var(--pl-text-soft);
  --cmf-visual-command: var(--pl-action);
  --cmf-visual-command-hover: var(--pl-action-hover);
  --cmf-visual-command-ink: var(--color-white);
  --cmf-visual-command-tint: #f8e8e3;
  --cmf-visual-command-tint-strong: #f1d1c9;
  --cmf-visual-info: #315b78;
  --cmf-visual-focus-ring: var(--pl-focus);
  --cmf-visual-folio: rgb(200 64 42 / 22%);
  --cmf-visual-shadow: 0 26px 64px rgb(42 13 7 / 24%), 0 8px 20px rgb(42 13 7 / 11%);
  --cmf-visual-plan-current: #4d5b70;
  --cmf-visual-plan-proposed: var(--pl-ink);
  --cmf-visual-plan-alt: #213e5b;
  --cmf-visual-ready-tint: #e9f2ec;
  --cmf-visual-review-tint: var(--pl-paper-mark);
  --cmf-visual-danger-tint: var(--pl-action-tint);
  --cmf-visual-info-tint: var(--pl-paper-sunk);
  --cmf-visual-signal: var(--pl-action);
  --cmf-visual-signal-hover: var(--pl-action-hover);
  --cmf-visual-signal-text: var(--pl-signal-deep);
  --cmf-visual-signal-tint: var(--pl-action-tint);
  --cmf-visual-focus: var(--pl-action);
  --cmf-font-sans: var(--font-ui);
  --cmf-wb-header-bg: var(--pl-ink);
  --cmf-wb-header-border: rgb(255 201 188 / 32%);
  --cmf-wb-header-icon-bg: rgb(255 248 241 / 8%);
  --cmf-wb-subtitle-color: var(--pl-on-ink-muted);
  --cmf-wb-rail-bg: var(--pl-paper-ground);
  --cmf-wb-rail-border: var(--pl-rule);
  --cmf-wb-footer-bg: var(--pl-paper);
  --cmf-wb-footer-border: var(--pl-rule-strong);
  --modal-body-bg: var(--pl-paper);
  --modal-body-color: var(--pl-ink);
  --modal-footer-bg: var(--pl-paper);
  --modal-footer-border: 1px solid var(--pl-rule);
  --modal-section-bg: var(--pl-paper-ground);
  --modal-section-divider: var(--pl-rule);
  --modal-text-primary: var(--pl-ink);
  --modal-text-secondary: var(--pl-text-muted);
  --modal-link: var(--pl-action);
  --modal-btn-secondary-bg: var(--pl-paper);
  --modal-btn-secondary-color: var(--pl-ink);
  --modal-btn-secondary-border: 1px solid var(--pl-rule-strong);
  --modal-btn-secondary-bg-hover: var(--pl-paper-inset);
  --modal-btn-secondary-border-hover: 1px solid var(--pl-action);
  --cmf-content-section-bg: var(--semantic-surface-subtle);
  --cmf-content-section-border: var(--semantic-border-subtle);
  --cmf-state-info-bg: var(--semantic-state-info-bg);
  --cmf-state-info-border: var(--semantic-state-info-border);
  --cmf-state-info-ink: var(--semantic-state-info-ink);
  --cmf-state-success-bg: var(--semantic-state-success-bg);
  --cmf-state-success-border: var(--semantic-state-success-border);
  --cmf-state-success-ink: var(--semantic-state-success-ink);
  --cmf-state-warning-bg: var(--semantic-state-warning-bg);
  --cmf-state-warning-border: var(--semantic-state-warning-border);
  --cmf-state-warning-ink: var(--semantic-state-warning-ink);
  --cmf-state-danger-bg: var(--semantic-state-danger-bg);
  --cmf-state-danger-border: var(--semantic-state-danger-border);
  --cmf-state-danger-ink: var(--semantic-state-danger-ink);
  /* Bare state roles some Vue routes read (ClientRoute, WizardPage, RatesLedger). */
  --cmf-state-success: var(--cmf-state-success-ink);
  --cmf-state-warning: var(--cmf-state-warning-ink);
  --cmf-state-danger: var(--cmf-state-danger-ink);
  --cmf-state-focus: var(--cmf-visual-command);
  /* Accent text sits on ink (the Step 1 chooser heading). */
  --cmf-state-accent: var(--pl-signal-tint);

  color: var(--pl-ink);
  background: var(--pl-paper);
  font-family: var(--font-ui);
}