/* Planlined Signal · Precision Slate — product theme VALUES.
   Loads after planlined-product-theme.css (which matches ^='planlined' and
   therefore also applies here) and repoints roles only. Selectors: the theme
   root, the shell/page-root list and the CMF overlay/modal, plus a short list
   of component-scoped twins at the end for literal warm colours the paper sheet
   declares inside rules (those cannot be reached by a token). No properties
   other than tokens, except those twins' border/shadow/background colours.
   Source: public/mockups/planlined-aaa-system-2026-10-08/tokens.css and the
   spec docs/superpowers/specs/2026-10-08-precision-slate-kit-system-design.md */

html[data-product-theme='planlined-slate'] {
  --pl-ink: #172d43;
  --pl-ink-warm: #213e5b;
  --pl-ink-deep: #12243a;
  --pl-rail-raised: #2a4766;
  --pl-rail-rule: rgb(255 255 255 / 10%);
  --pl-paper: #fff;
  --pl-paper-soft: #f7f9fc;
  --pl-paper-ground: #f3f5f8;
  --pl-paper-inset: #edf2f8;
  --pl-paper-sunk: #edf2f8;
  --pl-paper-mark: #eef2f7;
  --pl-text-strong: #172d43;
  --pl-text-muted: #334155;
  --pl-text-soft: #52657a;
  --pl-text-faint: #647285;
  --pl-shadow-warm: rgb(23 45 67 / 8%);

  /* Finish layer (direction A · Instrument, chosen 2026-10-08 from
     public/mockups/planlined-aaa-finish-2026-10-08/). Material tokens read by
     the slate block at the end of planlined-product-theme.css: one light
     source, lifted panels, a lit rail, inner light on controls. Values only;
     every colour derives from a slate role so the finish moves with the theme. */
  --pl-light: radial-gradient(
    1200px 520px at 18% -8%,
    color-mix(in srgb, var(--pl-paper) 60%, var(--pl-paper-ground)) 0%,
    var(--pl-paper-ground) 62%
  );
  --pl-rail-plate: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pl-ink-warm) 40%, var(--pl-ink)) 0,
    var(--pl-ink) 140px
  );
  --pl-rail-active: rgb(255 255 255 / 11%);
  --pl-shadow-rest: color-mix(in srgb, var(--pl-ink) 7%, transparent);
  --pl-shadow-lift: color-mix(in srgb, var(--pl-ink) 38%, transparent);
  --pl-shadow-modal: color-mix(in srgb, var(--pl-ink) 20%, transparent);
  --pl-elevation-panel:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 1px 2px color-mix(in srgb, var(--pl-ink) 5%, transparent),
    0 10px 28px -18px color-mix(in srgb, var(--pl-ink) 22%, transparent);
  --pl-elevation-panel-hover:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 2px 4px color-mix(in srgb, var(--pl-ink) 6%, transparent),
    0 18px 36px -18px color-mix(in srgb, var(--pl-ink) 30%, transparent);
  --pl-elevation-band: 0 2px 8px -6px color-mix(in srgb, var(--pl-ink) 18%, transparent);
  --pl-elevation-control:
    inset 0 1px 0 rgb(255 255 255 / 80%),
    0 1px 1px color-mix(in srgb, var(--pl-ink) 6%, transparent);
  --pl-elevation-primary:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 1px 2px color-mix(in srgb, var(--pl-signal-deep) 35%, transparent);
  --pl-elevation-primary-hover:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 3px 10px -3px color-mix(in srgb, var(--pl-signal-deep) 55%, transparent);
  --pl-field-inset: inset 0 1px 1px color-mix(in srgb, var(--pl-ink) 4%, transparent);
  --pl-badge-edge: inset 0 0 0 1px color-mix(in srgb, var(--pl-ink) 4%, transparent);
  --pl-rule: #dce4ee;
  --pl-rule-strong: #c4d0de;
  --pl-signal: #c8402a;
  --pl-signal-deep: #a63320;
  --pl-action: #c8402a;
  --pl-action-hover: #b23724;
  --pl-action-tint: #fbede9;
  --pl-signal-tint: #fbede9;
  --pl-focus: #3268c8;
  --pl-focus-stroke: #3268c8;
  --pl-on-ink: #fff;
  --pl-on-ink-muted: rgb(255 255 255 / 70%);
  --cmf-visual-disabled-surface: #f7f9fc;
  --cmf-visual-disabled-ink: #647285;

  /* Status palette. The paper sheet's older families (--semantic-state-*,
     --cmf-state-*) and its warm surface/border/brand tints are repointed here
     so callouts, chips and badges never mix cream grounds with slate ink. */
  --semantic-state-info-bg: #edf2f8;
  --semantic-state-info-border: #bccbdd;
  --semantic-state-info-ink: #2f4a68;
  --semantic-state-success-bg: #e6f3ec;
  --semantic-state-success-border: #b5d6c5;
  --semantic-state-success-ink: #1f6b4d;
  --semantic-state-warning-bg: #eef2f7;
  --semantic-state-warning-border: #c4d0de;
  --semantic-state-warning-ink: #8a5a00;
  --semantic-state-danger-bg: #f7e9eb;
  --semantic-state-danger-border: #e3bcc1;
  --semantic-state-danger-ink: #a61e2b;
  --cmf-state-info-bg: #edf2f8;
  --cmf-state-info-border: #bccbdd;
  --cmf-state-info-ink: #2f4a68;
  --cmf-state-success-bg: #e6f3ec;
  --cmf-state-success-border: #b5d6c5;
  --cmf-state-success-ink: #1f6b4d;
  --cmf-state-warning-bg: #eef2f7;
  --cmf-state-warning-border: #c4d0de;
  --cmf-state-warning-ink: #8a5a00;
  --cmf-state-danger-bg: #f7e9eb;
  --cmf-state-danger-border: #e3bcc1;
  --cmf-state-danger-ink: #a61e2b;
  --surface-hover: #f7f9fc;
  --border-emphasis: #c4d0de;
  --brand-primary-light: #e9f0fb;
  --brand-primary-lighter: #f3f7fd;
  --pl-danger-border: #e3bcc1;
  --pl-danger-tint-strong: #f0d3d7;
  --cmf-header-edge: rgb(255 255 255 / 16%);
  --cmf-header-tile: rgb(255 255 255 / 8%);
  --cmf-header-tile-hover: rgb(255 255 255 / 14%);
  --cmf-wb-header-border: rgb(255 255 255 / 16%);
  --cmf-wb-header-icon-bg: rgb(255 255 255 / 8%);

  /* Edges on ink, shadows and brick-hover washes that the paper sheet spells
     as literals inside component rules; it reads these with the paper literal
     as the fallback, so only this sheet changes what they paint. */
  --pl-ink-edge: rgb(255 255 255 / 16%);
  --pl-ink-edge-mid: rgb(255 255 255 / 16%);
  --pl-ink-edge-quiet: rgb(255 255 255 / 10%);
  --pl-ink-edge-faint: rgb(255 255 255 / 10%);
  --pl-ink-tile: rgb(255 255 255 / 8%);
  --pl-shadow-rest: rgb(23 45 67 / 7%);
  --pl-shadow-lift: rgb(23 45 67 / 38%);
  --pl-shadow-modal: rgb(23 45 67 / 20%);
  --pl-action-edge: rgb(200 64 42 / 45%);
  --pl-action-wash: rgb(200 64 42 / 5%);

  /* Geometry and ink. Desktop-first; the coarse-pointer floor lives in
     complex-modal-factory.css so every theme shares one touch rule. */
  --pl-savings: #1f6b4d;
  --pl-success-ink: #1f6b4d;
  --pl-warning-ink: #8a5a00;
  --pl-danger-ink: #a61e2b;
  --pl-info-ink: #2f4a68;

  /* Link role (DESIGN.md `command`): the kit's --cmf-visual-command, readable where only
     --pl-* roles reach (the classic Step 5 dashboard). */
  --pl-command: #2b5fc0;
  --pl-command-hover: #234f9f;
  --pl-contribution-employer: var(--pl-ink-warm);
  --pl-contribution-employee: color-mix(in srgb, var(--pl-focus) 60%, var(--pl-on-ink));
  --pl-danger-tint: #f7e9eb;
  --cmf-control-h-primary: 36px;
  --cmf-control-h-secondary: 32px;
  --cmf-control-h-field: 36px;
  --cmf-control-h-compact: 28px;
  --cmf-control-radius: 4px;
  --cmf-control-pad-y: 0;
  --cmf-control-pad-x: 12px;
  --cmf-control-pad-x-primary: 16px;
  --cmf-control-font: 12.5px;
  --cmf-control-font-primary: 13px;
  --cmf-control-font-weight: 500;
  --cmf-control-font-weight-primary: 600;
  --cmf-field-pad-y: 0;
  --cmf-field-pad-x: 10px;
  --cmf-field-font: 13.5px;
  --cmf-field-radius: 4px;
  --cmf-field-line-height: 34px;

  /* Ledger column-head ink: #64748b on the #f7faff head measures 4.39:1. */
  --ledger-role-current-ink: #5a6b80;
}

/* Same selector list as the paper theme's --cmf-visual-* repoint block
   (planlined-product-theme.css, "The standalone Vue page roots ..."), with
   ='planlined-slate' substituted, so every complex selector ties on
   specificity (including the :is(#...) ID-level ones) and this sheet wins by
   source order. */
html[data-product-theme='planlined-slate'] .cmf-modal,
html[data-product-theme='planlined-slate'] [data-page-shell-host],
html[data-product-theme='planlined-slate']
  :is(
    #quick-case-modal,
    #wizard-root,
    #cases-root,
    #benefit-guide-root,
    #plans-root,
    #shared-links-root,
    #documents-root,
    #what-if-root,
    #renewal-root,
    #oasis-root,
    #implementation-root,
    .implementation-export-document,
    #storage-root,
    #aca-marketplace-root,
    #feedback-root,
    #account-root,
    #organizations-root
  ) {
  --cmf-visual-header: #172d43;
  --cmf-visual-header-high: #213e5b;
  --cmf-visual-surface: #fff;
  --cmf-visual-surface-raised: #fff;
  --cmf-visual-rail: #f3f5f8;
  --cmf-visual-rule: #dce4ee;
  --cmf-visual-rule-strong: #c4d0de;
  --cmf-visual-edge: #c4d0de;
  --cmf-visual-ink: #172d43;
  --cmf-visual-ink-secondary: #334155;
  --cmf-visual-ink-tertiary: #52657a;
  --cmf-visual-command: #2b5fc0;
  --cmf-visual-command-hover: #234f9f;
  /* Re-resolve inside the host: :root captured the legacy command for the spinner ring. */
  --cmf-accent: var(--cmf-visual-command);
  /* quick-case-creator.css declares these on :root with the legacy palette; inside a slate
     host they must read the slate roles. */
  --qcc-primary-light: var(--cmf-visual-signal-tint);
  --qcc-border-emphasis: var(--cmf-visual-rule-strong);
  --qcc-text-muted: var(--cmf-visual-ink-tertiary);
  --qcc-text-placeholder: var(--cmf-visual-ink-tertiary);
  --cmf-visual-command-ink: #fff;
  --cmf-visual-command-tint: #e9f0fb;
  --cmf-visual-command-tint-strong: #d4e2f7;
  --cmf-visual-info: #2f4a68;
  --cmf-visual-ready: #1f6b4d;
  --cmf-visual-review: #8a5a00;
  --cmf-visual-danger: #a61e2b;
  --cmf-visual-staged: #213e5b;
  --cmf-visual-focus-ring: rgb(50 104 200 / 30%);
  --cmf-visual-focus: #3268c8;
  --cmf-visual-folio: rgb(200 64 42 / 22%);
  --cmf-visual-shadow: 0 24px 56px -20px rgb(23 45 67 / 45%), 0 2px 6px rgb(23 45 67 / 12%);
  --cmf-visual-plan-current: #4d5b70;
  --cmf-visual-plan-proposed: #172d43;
  --cmf-visual-plan-alt: #213e5b;
  --cmf-visual-ready-tint: #e6f3ec;
  --cmf-visual-review-tint: #eef2f7;
  --cmf-visual-danger-tint: #f7e9eb;
  --cmf-visual-info-tint: #edf2f8;
  --cmf-visual-signal: #c8402a;
  --cmf-visual-signal-hover: #b23724;
  --cmf-visual-signal-text: #a63320;
  --cmf-visual-signal-tint: #fbede9;
  --cmf-state-focus: #3268c8;
  --semantic-state-info-bg: #edf2f8;
  --semantic-state-info-border: #bccbdd;
  --semantic-state-info-ink: #2f4a68;
  --semantic-state-success-bg: #e6f3ec;
  --semantic-state-success-border: #b5d6c5;
  --semantic-state-success-ink: #1f6b4d;
  --semantic-state-warning-bg: #eef2f7;
  --semantic-state-warning-border: #c4d0de;
  --semantic-state-warning-ink: #8a5a00;
  --semantic-state-danger-bg: #f7e9eb;
  --semantic-state-danger-border: #e3bcc1;
  --semantic-state-danger-ink: #a61e2b;
  --cmf-state-info-bg: #edf2f8;
  --cmf-state-info-border: #bccbdd;
  --cmf-state-info-ink: #2f4a68;
  --cmf-state-success-bg: #e6f3ec;
  --cmf-state-success-border: #b5d6c5;
  --cmf-state-success-ink: #1f6b4d;
  --cmf-state-warning-bg: #eef2f7;
  --cmf-state-warning-border: #c4d0de;
  --cmf-state-warning-ink: #8a5a00;
  --cmf-state-danger-bg: #f7e9eb;
  --cmf-state-danger-border: #e3bcc1;
  --cmf-state-danger-ink: #a61e2b;
  --cmf-header-edge: rgb(255 255 255 / 16%);
  --cmf-header-tile: rgb(255 255 255 / 8%);
  --cmf-header-tile-hover: rgb(255 255 255 / 14%);
  --cmf-wb-header-border: rgb(255 255 255 / 16%);
  --cmf-wb-header-icon-bg: rgb(255 255 255 / 8%);
}

/* The Assistant drawer is not under the shell selectors above; the paper sheet
   repoints command/signal/focus there with an ID-level rule, so mirror it. */
html[data-product-theme='planlined-slate'] #command-palette-overlay {
  --cmf-visual-command: #2b5fc0;
  --cmf-visual-command-hover: #234f9f;
  /* Re-resolve inside the host: :root captured the legacy command for the spinner ring. */
  --cmf-accent: var(--cmf-visual-command);
  /* quick-case-creator.css declares these on :root with the legacy palette; inside a slate
     host they must read the slate roles. */
  --qcc-primary-light: var(--cmf-visual-signal-tint);
  --qcc-border-emphasis: var(--cmf-visual-rule-strong);
  --qcc-text-muted: var(--cmf-visual-ink-tertiary);
  --qcc-text-placeholder: var(--cmf-visual-ink-tertiary);
  --cmf-visual-focus: #3268c8;
  --cmf-header-edge: rgb(255 255 255 / 16%);
}

/* .cmf-modal assigns the five field tokens itself, so the root block above
   cannot reach them inside a modal. */
html[data-product-theme='planlined-slate'] .cmf-modal {
  --semantic-state-info-bg: #edf2f8;
  --semantic-state-info-border: #bccbdd;
  --semantic-state-info-ink: #2f4a68;
  --semantic-state-success-bg: #e6f3ec;
  --semantic-state-success-border: #b5d6c5;
  --semantic-state-success-ink: #1f6b4d;
  --semantic-state-warning-bg: #eef2f7;
  --semantic-state-warning-border: #c4d0de;
  --semantic-state-warning-ink: #8a5a00;
  --semantic-state-danger-bg: #f7e9eb;
  --semantic-state-danger-border: #e3bcc1;
  --semantic-state-danger-ink: #a61e2b;
  --cmf-state-info-bg: #edf2f8;
  --cmf-state-info-border: #bccbdd;
  --cmf-state-info-ink: #2f4a68;
  --cmf-state-success-bg: #e6f3ec;
  --cmf-state-success-border: #b5d6c5;
  --cmf-state-success-ink: #1f6b4d;
  --cmf-state-warning-bg: #eef2f7;
  --cmf-state-warning-border: #c4d0de;
  --cmf-state-warning-ink: #8a5a00;
  --cmf-state-danger-bg: #f7e9eb;
  --cmf-state-danger-border: #e3bcc1;
  --cmf-state-danger-ink: #a61e2b;
  --cmf-field-radius: 4px;
  --cmf-control-h-field: 36px;
  --cmf-field-pad-y: 0;
  --cmf-field-pad-x: 10px;
  --cmf-field-font: 13.5px;
  --cmf-field-line-height: 34px;
}