/* OS appearance is independent of the centrally selected design theme.
   Keep every override inside this query: light appearance remains byte-for-byte
   the existing cascade. No script, preference storage, font or network request.
   v1 is a separate cache key; bump the filename and both layouts on revisions. */
@media (prefers-color-scheme: dark) {
  html[data-theme] {
    color-scheme: dark;
    --appearance-canvas: #101923;
    --appearance-header: #12263d;
    --appearance-raised: #253548;
    --appearance-input: #1c2b3c;
    --appearance-hover: #31465c;
    --appearance-button: #9acbff;
    --appearance-button-hover: #c3e0ff;
    --appearance-button-ink: #101923;
    --appearance-chart: #9acbff;
    --appearance-previous: #8c9eb5;
    --ink: #edf3fa;
    --navy: #12263d;
    --blue: #9acbff;
    --sky: #253548;
    --line: #71859b;
    --muted: #b9c8da;
    --paper: #192635;
    --ok: #8ee0b4;
    --warn: #f6d18a;
    --bad: #ffafb0;
  }
  html[data-theme="flat"], html[data-theme="utility"], html[data-theme="bento"] {
    --appearance-canvas: #171819;
    --appearance-header: #1f2228;
    --appearance-raised: #303336;
    --appearance-input: #25282b;
    --appearance-hover: #414549;
    --appearance-button: #dedfe0;
    --appearance-button-hover: #ffffff;
    --appearance-button-ink: #171819;
    --appearance-chart: #dedfe0;
    --appearance-previous: #9ca1a6;
    --ink: #f0f1f2;
    --navy: #1f2228;
    --blue: #dedfe0;
    --sky: #303336;
    --line: #858b91;
    --muted: #c2c6ca;
    --paper: #242629;
  }
  html[data-theme="utility"] {
    --utility-canvas: var(--appearance-canvas);
    --utility-module: var(--paper);
    --utility-line: var(--line);
    --appearance-header: #111111;
    --ok: #e1e3df;
    --warn: #d2d4ce;
    --bad: #ffffff;
  }
  html[data-theme="bento"] {
    --bento-canvas: var(--appearance-canvas);
    --bento-surface-1: #242629;
    --bento-surface-2: #2d3033;
    --bento-surface-3: #363a3e;
    --bento-surface-4: #42474c;
    --ok: #e1e4e7;
    --warn: #d2d6da;
    --bad: #ffffff;
  }
  html[data-theme="performance"] {
    --performance-canvas: #25282b;
    --performance-accent: #ff858d;
    --appearance-canvas: #1d1f21;
    --appearance-header: #000000;
    --appearance-raised: #292c2f;
    --appearance-input: #181b1e;
    --appearance-hover: #3b3034;
    --appearance-button: #000000;
    --appearance-button-hover: #871d28;
    --appearance-button-ink: #ffffff;
    --appearance-chart: #ff858d;
    --appearance-previous: #c4c9cf;
    --ink: #f5f6f7;
    --navy: #000000;
    --blue: #ffadb2;
    --sky: #292c2f;
    --line: #828a93;
    --muted: #c6cbd1;
    --paper: #16191c;
  }
  html[data-theme="carbon"] {
    --appearance-canvas: #161616;
    --appearance-header: #161616;
    --appearance-raised: #393939;
    --appearance-input: #393939;
    --appearance-hover: #474747;
    --appearance-button: #0f62fe;
    --appearance-button-hover: #0043ce;
    --appearance-button-ink: #ffffff;
    --appearance-chart: #78a9ff;
    --appearance-previous: #a6c8ff;
    --cds-background: #161616;
    --cds-layer-01: #262626;
    --cds-layer-02: #393939;
    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-border-subtle: #8d8d8d;
    --cds-interactive: #78a9ff;
    --cds-interactive-hover: #a6c8ff;
    --cds-focus: #ffffff;
    --ink: var(--cds-text-primary);
    --navy: #161616;
    --blue: var(--cds-interactive);
    --sky: #393939;
    --line: var(--cds-border-subtle);
    --muted: var(--cds-text-secondary);
    --paper: var(--cds-layer-01);
  }

  /* Color-only rules preserve each theme's layout, radius, grid, typography,
     clipping and shadows. Match the html[data-theme] specificity of app.css. */
  html[data-theme] body { background-color: var(--appearance-canvas); color: var(--ink); }
  html[data-theme] header { background-color: var(--appearance-header); color: var(--ink); border-color: var(--line); }
  html[data-theme] header span, html[data-theme] .data-state { color: var(--muted); }
  html[data-theme] nav { background-color: var(--paper); border-color: var(--line); }
  html[data-theme] nav a { color: var(--ink); border-color: var(--line); }
  html[data-theme] nav a:hover { background: var(--appearance-hover); color: var(--ink); }
  html[data-theme] main a { color: var(--blue); }
  html[data-theme] main a:hover { color: var(--ink); }
  html[data-theme] h1, html[data-theme] h2 { color: var(--ink); border-color: var(--line); }
  html[data-theme] .sub, html[data-theme] .muted, html[data-theme] .card label,
  html[data-theme] footer { color: var(--muted); border-color: var(--line); }

  html[data-theme] .card, html[data-theme] .panel, html[data-theme] .filters,
  html[data-theme] .planning-actions, html[data-theme] .theme-option {
    background-color: var(--paper); border-color: var(--line);
  }
  /* Bento's nth-child layer selectors remain more specific than .card. */
  html[data-theme="bento"] .filters { background-color: var(--bento-surface-2); }
  html[data-theme="utility"] .card, html[data-theme="utility"] .panel,
  html[data-theme="utility"] .filters { border-top-color: var(--ink); }
  html[data-theme] .panel + .panel { border-color: var(--line); }
  html[data-theme] .article-column-picker, html[data-theme] .tissue-paper-values > div,
  html[data-theme] .feature-csv-tools { background: var(--appearance-raised); border-color: var(--line); }
  html[data-theme] .article-column-picker summary { color: var(--ink); }
  html[data-theme] .filters .article-column-options label {
    background: var(--appearance-input); color: var(--ink); border-color: var(--line);
  }
  html[data-theme] .filters .article-column-options label:has(input:checked) {
    background: var(--appearance-hover); border-color: var(--blue);
  }

  html[data-theme] input, html[data-theme] select, html[data-theme] textarea,
  html[data-theme] .plan-input {
    background-color: var(--appearance-input); color: var(--ink); border-color: var(--line);
    accent-color: var(--blue);
  }
  html[data-theme] select option { background: var(--appearance-input); color: var(--ink); }
  html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--muted); opacity: 1; }
  html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus,
  html[data-theme] button:focus-visible, html[data-theme] a:focus-visible,
  html[data-theme] summary:focus-visible, html[data-theme] [tabindex="0"]:focus-visible {
    outline: 2px solid var(--blue);
  }
  html[data-theme] input:disabled, html[data-theme] select:disabled, html[data-theme] textarea:disabled {
    color: var(--muted); -webkit-text-fill-color: var(--muted);
  }
  html[data-theme] button, html[data-theme] .button, html[data-theme] .user-box button {
    background: var(--appearance-button); color: var(--appearance-button-ink); border-color: var(--line);
  }
  html[data-theme] button:hover, html[data-theme] .button:hover,
  html[data-theme] .user-box button:hover {
    background: var(--appearance-button-hover); color: var(--appearance-button-ink);
  }
  html[data-theme] main a.button, html[data-theme] main a.button:hover { color: var(--appearance-button-ink); }

  html[data-theme] table { background: var(--paper); color: var(--ink); border-color: var(--line); }
  html[data-theme] th { background: var(--appearance-raised); color: var(--ink); border-color: var(--line); }
  html[data-theme] td { border-color: var(--line); }
  html[data-theme] tr:nth-child(even) td { background: var(--appearance-raised); }
  html[data-theme] tbody tr:hover td { background: var(--appearance-hover); }
  html[data-theme] .table-wrap { border-color: var(--line); }
  html[data-theme] .extra-metric-column { background: var(--appearance-raised); }
  html[data-theme] .positive { color: var(--ok); }
  html[data-theme] .negative, html[data-theme] .critical { color: var(--bad); }
  html[data-theme] .warning { color: var(--warn); }
  html[data-theme] .badge { background: var(--appearance-raised); color: var(--ink); border-color: var(--line); }
  html[data-theme] .badge.completed { background: #193b2e; color: #a7efc6; }
  html[data-theme] .badge.completed_with_errors, html[data-theme] .badge.warning { background: #443519; color: #ffe0a1; }
  html[data-theme] .badge.failed, html[data-theme] .badge.error { background: #49262b; color: #ffbfc2; }
  html[data-theme] .notice, html[data-theme] .formula, html[data-theme] .empty {
    background: var(--appearance-raised); color: var(--ink); border-color: var(--line);
  }
  html[data-theme] .notice.critical { background: #38252c; color: var(--bad); border-color: var(--bad); }
  html[data-theme] .notice a { color: var(--blue); }
  html[data-theme] .formula { border-left-color: var(--blue); }
  /* Utility and Bento intentionally communicate states in monochrome. */
  html[data-theme="utility"] .badge.completed, html[data-theme="bento"] .badge.completed,
  html[data-theme="utility"] .badge.completed_with_errors, html[data-theme="bento"] .badge.completed_with_errors,
  html[data-theme="utility"] .badge.warning, html[data-theme="bento"] .badge.warning {
    background: var(--appearance-raised); color: var(--ink);
  }
  html[data-theme="utility"] .badge.failed, html[data-theme="bento"] .badge.failed,
  html[data-theme="utility"] .badge.error, html[data-theme="bento"] .badge.error,
  html[data-theme="utility"] .notice.critical, html[data-theme="bento"] .notice.critical {
    background: var(--appearance-hover); color: var(--bad);
  }

  html[data-theme] .bar { background: var(--appearance-raised); }
  html[data-theme] .bar-chart-scroll { background: var(--paper); border-color: var(--line); }
  html[data-theme] .bar-grid-line { stroke: var(--line); }
  html[data-theme] .bar-zero-line { stroke: var(--muted); }
  html[data-theme] .bar-axis-label, html[data-theme] .bar-x-label { fill: var(--muted); }
  html[data-theme] .bar-current { fill: var(--appearance-chart); }
  html[data-theme] .bar-previous { fill: var(--appearance-previous); stroke: var(--appearance-previous); opacity: 1; }
  html[data-theme] .bar-current.negative, html[data-theme] .bar-previous.negative { fill: var(--bad); stroke: var(--bad); }
  html[data-theme] .bar-key.current { background: var(--appearance-chart); }
  html[data-theme] .bar-key.previous { background: var(--appearance-previous); border-color: var(--appearance-previous); }
  html[data-theme] .pie-base { fill: var(--appearance-raised); }
  /* Dynamic category fills (SVG attributes) and matching legend swatches stay
     unchanged. A thin light boundary separates even dark category colors. */
  html[data-theme] .pie-slice { stroke: var(--ink); stroke-width: .5px; }

  html[data-theme] .theme-option:has(input:checked) { border-color: var(--blue); }
  html[data-theme] .theme-preview { background-color: var(--appearance-canvas); border-color: var(--line); }
  html[data-theme] .theme-preview-header { background: var(--appearance-header); border-color: var(--line); }
  html[data-theme] .theme-preview-nav { background: var(--appearance-raised); border-color: var(--line); }
  html[data-theme] .theme-preview-card { background: var(--paper); border-color: var(--line); }
  html[data-theme] .theme-preview-flat .theme-preview-nav { background: var(--appearance-raised); }
  html[data-theme] .theme-preview-bento .theme-preview-card:nth-last-child(2) { background: #242629; }
  html[data-theme] .theme-preview-bento .theme-preview-card:last-child { background: #42474c; }
  html[data-theme] .theme-preview-carbon .theme-preview-card { border-bottom-color: #78a9ff; }
  html[data-theme] .theme-preview-performance .theme-preview-header { background: #000; }

  /* app.css theme buttons outrank the component's base selectors. Explicitly
     preserve chat's inverse user bubbles, primary actions and quiet starters;
     do not touch its existing layout/padding (including the Carbon reset). */
  html[data-theme] .data-chat { --chat-contrast: var(--paper); }
  html[data-theme] .data-chat button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  html[data-theme] .data-chat button:hover { background: var(--muted); color: var(--paper); }
  html[data-theme] .data-chat button.data-chat-secondary {
    background: transparent; color: var(--muted); border-color: var(--line);
  }
  html[data-theme] .data-chat .data-chat-starters button {
    background: var(--paper); color: var(--muted); border-color: var(--line);
  }
  html[data-theme] .data-chat button.data-chat-secondary:hover,
  html[data-theme] .data-chat .data-chat-starters button:hover { background: var(--chat-inset); color: var(--ink); }
  html[data-theme] .data-chat .data-chat-table-scroll th { background: var(--chat-inset); color: var(--ink); }
  html[data-theme] .data-chat .data-chat-table-scroll td { background: var(--paper); color: var(--ink); }
  html[data-theme] .data-chat .data-chat-table-scroll tr:nth-child(even) td,
  html[data-theme] .data-chat .data-chat-table-scroll tbody tr:hover td { background: var(--chat-inset); }
}