/* ══════════════════════════════════════════════════════════════
   DARK THEME — PPG under html[data-scheme="dark"].
   Cariara's navy-slate dark (apps/web/src/styles/desktop-dark.css): the same
   saved choice (localStorage cariara.theme) switches both, and index.html
   applies it before first paint. Loaded last; light is untouched.
   The Waymo four, lighter where they carry type, on slate greys.
   ══════════════════════════════════════════════════════════════ */
html[data-scheme='dark'] {
  color-scheme: dark;

  /* app.css */
  --ground: #22272E;
  --surface-1: #2D333B;
  --surface-2: #373E47;
  --surface-3: #373E47;
  --bg-overlay: rgba(10, 14, 22, .6);
  --border: #545D68;
  --control: #636E7B;
  --border-strong: #636E7B;
  --border-hover: #636E7B;
  --hairline: #545D68;
  --panel: #373E47;
  --panel-blue: #373E47;
  --title: #E6EDF3;
  --text-primary: #E6EDF3;
  --text-secondary: #B6C2CF;
  --text-muted: #B6C2CF;
  --text-dimmed: #9DA9B6;
  --text-disabled: #6B778B;
  --g-blue-text: #5AA2FF;
  --g-red-text: #9CC6FF;
  --g-yellow-text: #9AD61A;
  --g-green-text: #00C896;
  --g-ink: #E6EDF3;
  --accent: #5AA2FF;
  --accent-hover: #D4E0FC;
  --accent-pressed: #D4E0FC;
  --accent-text: #5AA2FF;
  --accent-subtle: rgba(90, 162, 255, .16);
  --accent-line: rgba(90, 162, 255, .45);
  --accent-ink: #10161E;
  --success: #00C896;
  --warning: #9AD61A;
  --danger: #F2B8B5;
  --danger-fill: #4A2E33;
  --err: #F28B82;
  --err-text: #F2B8B5;
  --err-t: #3F2A2C;
  --easy: #00C896;
  --medium: #9AD61A;
  --hard: #9CC6FF;
  --rail-head: #5AA2FF;
  --rail-head-mark: rgba(90, 162, 255, .9);
  --rail-head-line: rgba(90, 162, 255, .2);
  --lum-bg: #2D333B;
  --syn-keyword: #9CC6FF;
  --syn-string: #00C896;
  --syn-number: #9AD61A;
  --syn-comment: #9DA9B6;
  --syn-def: #5AA2FF;
  --syn-builtin: #D4E0FC;
  --syn-operator: #B6C2CF;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .25);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px 2px rgba(0, 0, 0, .25);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px 3px rgba(0, 0, 0, .3);
  --shadow-focus: 0 0 0 2px #5AA2FF;
  --gcp-elevation-1: var(--shadow-sm);
  --gcp-elevation-2: var(--shadow-md);

  /* m3.css */
  --m3-ink: #E6EDF3;
  --m3-ink-2: #B6C2CF;
  --m3-ink-3: #9DA9B6;
  --m3-line: #545D68;
  --m3-line-2: #636E7B;
  --m3-surface: #373E47;
  --m3-surface-2: #2D333B;
  --m3-primary: #5AA2FF;
  --m3-primary-hover: #D4E0FC;
  --m3-primary-ink: #5AA2FF;
  --m3-tonal: rgba(90, 162, 255, .14);
  --m3-on-tonal: #D4E0FC;
  --m3-shadow-1: var(--shadow-sm);
  --m3-shadow-2: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px -6px rgba(0, 0, 0, .5);
  --m3-focus: 0 0 0 3px rgba(90, 162, 255, .45);

  /* the SQL playground */
  --sqp-blue: #5AA2FF; --sqp-blue-fill: #0077FF; --sqp-blue-tint: rgba(90, 162, 255, .16);
  --sqp-red: #F2B8B5; --sqp-red-tint: rgba(242, 184, 181, .16);
  --sqp-yellow-text: #9AD61A; --sqp-yellow-tint: rgba(154, 214, 26, .16);
  --sqp-green-tint: rgba(109, 213, 140, .16);
  --sqp-grey-bg: #373E47; --sqp-line: #636E7B; --sqp-line-soft: #545D68;
}

html[data-scheme='dark'],
html[data-scheme='dark'] body { background: #22272E; color: #E6EDF3; }
html[data-scheme='dark'] ::selection { background: rgba(90, 162, 255, .35); }
html[data-scheme='dark'] ::-webkit-scrollbar-thumb { background: #636E7B; }
html[data-scheme='dark'] ::-webkit-scrollbar-track { background: transparent; }

/* White surfaces written as literals in app.css and m3.css */
html[data-scheme='dark'] .topbar,
html[data-scheme='dark'] .rail,
html[data-scheme='dark'] .rail-head,
html[data-scheme='dark'] .rail-foot,
html[data-scheme='dark'] .verdict,
html[data-scheme='dark'] .sol-extra,
html[data-scheme='dark'] .landing,
html[data-scheme='dark'] .ex-card,
html[data-scheme='dark'] .sol-card,
html[data-scheme='dark'] .pgv-split { background: #2D333B; }
html[data-scheme='dark'] .landing-stat,
html[data-scheme='dark'] .landing-point,
html[data-scheme='dark'] .lab-card,
html[data-scheme='dark'] .tp-prereq { background: var(--m3-surface); }

html[data-scheme='dark'] .landing-point:hover,
html[data-scheme='dark'] .lab-card:hover,
html[data-scheme='dark'] .rmv-node:hover:not([disabled]) { background: #444C56; }
html[data-scheme='dark'] .p-item:hover,
html[data-scheme='dark'] .prob-state,
html[data-scheme='dark'] .pc-diff th { background: #373E47; }
html[data-scheme='dark'] .boot-veil { background: rgba(34, 39, 46, .94); }

/* Inputs and chips */
html[data-scheme='dark'] .search:focus,
html[data-scheme='dark'] .labdlg-search:focus,
html[data-scheme='dark'] .notes-box:focus,
html[data-scheme='dark'] .inputdlg-box:focus { background: #2D333B; }
html[data-scheme='dark'] .seg-b,
html[data-scheme='dark'] .lang-pill,
html[data-scheme='dark'] .lang-tab,
html[data-scheme='dark'] .lang-group,
html[data-scheme='dark'] .lab-filter,
html[data-scheme='dark'] .uc-chip,
html[data-scheme='dark'] .landing-resume-list button { background: #2D333B; }
html[data-scheme='dark'] .seg-b.is-on,
html[data-scheme='dark'] .lang-pill.is-on,
html[data-scheme='dark'] .lang-tab.is-on,
html[data-scheme='dark'] .lang-group.is-on,
html[data-scheme='dark'] .lab-filter.is-on,
html[data-scheme='dark'] .uc-chip.is-on { background: var(--m3-tonal); color: var(--m3-on-tonal); }
html[data-scheme='dark'] .uc-chip.is-on .ico { color: var(--m3-on-tonal); }
html[data-scheme='dark'] input,
html[data-scheme='dark'] textarea,
html[data-scheme='dark'] select { color: #E6EDF3; }

/* Buttons: dark ink on the pale tone-80 fills */
html[data-scheme='dark'] .btn { background: transparent; color: var(--m3-primary-ink); }
html[data-scheme='dark'] .btn:hover { background: rgba(90, 162, 255, .08); }
html[data-scheme='dark'] .btn-primary,
html[data-scheme='dark'] .btn-primary:hover { background: #5AA2FF; border-color: transparent; color: #10161E; }
html[data-scheme='dark'] .btn-primary:hover { background: #D4E0FC; }
html[data-scheme='dark'] .btn-secondary { background: rgba(90, 162, 255, .14); border-color: transparent; color: #D4E0FC; }
html[data-scheme='dark'] .btn-secondary:hover { background: #2E6FAE; }
html[data-scheme='dark'] .btn-ghost:hover { background: rgba(90, 162, 255, .08); }
html[data-scheme='dark'] .btn-danger,
html[data-scheme='dark'] .btn-danger:hover { background: #233348; border-color: transparent; color: #F9DEDC; }
html[data-scheme='dark'] .btn:disabled,
html[data-scheme='dark'] .btn:disabled:hover { background: rgba(230, 237, 243, .08); border-color: transparent; color: rgba(230, 237, 243, .38); }
html[data-scheme='dark'] .btn-primary::after,
html[data-scheme='dark'] .btn-danger::after { background: #10161E; }
html[data-scheme='dark'] .uc-count,
html[data-scheme='dark'] .sol-pill.is-on .sol-pill-n { color: #10161E; }

/* Badges: M3 dark containers */
html[data-scheme='dark'] .badge.d-Easy,
html[data-scheme='dark'] .badge.freq,
html[data-scheme='dark'] .prob-state.is-solved { background: #183D33; color: #CCF4E9; }
html[data-scheme='dark'] .badge.d-Medium { background: #33401B; color: #EBD9A6; }
html[data-scheme='dark'] .badge.d-Hard,
html[data-scheme='dark'] .badge.due,
html[data-scheme='dark'] .prob-state.is-solved.is-due { background: #233348; color: #F9DEDC; }

/* The code editor */
html[data-scheme='dark'] .CodeMirror { background: #22272E; color: #E6EDF3; }
html[data-scheme='dark'] .CodeMirror-gutters { background: #22272E; }
html[data-scheme='dark'] .CodeMirror-activeline-background { background: #373E47; }

/* The Codepad lab: brief pane and the chunky run controls */
html[data-scheme='dark'] .pgv-brief,
html[data-scheme='dark'] .pgv-actions { background: #2D333B; }
html[data-scheme='dark'] .pgv-labs-btn.is-on { background: #5AA2FF; border-color: #5AA2FF; color: #10161E; box-shadow: none; }
html[data-scheme='dark'] .pgv-actions .pgv-run { box-shadow: none; }
html[data-scheme='dark'] .pgv-actions .pgv-tests { background: transparent; border-color: #5AA2FF; color: #5AA2FF; box-shadow: none; }

/* Problem header and tabs */
html[data-scheme='dark'] .phd-ver .uc-chip,
html[data-scheme='dark'] .prob-nav-b { background: #2D333B; }
html[data-scheme='dark'] .phd-ver .uc-chip.is-on,
html[data-scheme='dark'] .docnav-b.is-on .docnav-n { background: #5AA2FF; border-color: #5AA2FF; color: #10161E; }
html[data-scheme='dark'] .phd-ver .uc-chip.is-on .ico,
html[data-scheme='dark'] .phd-ver-k span { color: #10161E; }
html[data-scheme='dark'] .phd-ver-sum { background: #2D333B; }

/* Prepare look: its tokens in the dark values Prepare uses. */
html[data-scheme="dark"] {
  --pz-shadow: #0b0f16;
  --pz-dot: #444C56;
  --pz-blue: #5AA2FF; --pz-red: #9CC6FF; --pz-yellow: #9AD61A; --pz-green: #00C896;
  --pz-blue-t: rgba(90, 162, 255, .14); --pz-red-t: #233348; --pz-yellow-t: #3d3624; --pz-green-t: #24392f;
}
html[data-scheme="dark"] .pcr-btn { color: #10161E; }