/* Shared dark theme. All site stylesheets import this palette. */
html[data-theme="dark"] {
  color-scheme: dark;

  /* A pure-black canvas, with restrained gray depth for the interface. */
  --bg: #000000;
  --surface: #0b0b0b;
  --surface-soft: #050505;
  --surface-raised: #161616;
  --surface-tint: #121212;
  --surface-blue: var(--surface);
  --surface-soft-2: #181818;
  --field-bg: #050505;
  --hover: #181818;

  --text: #f3f3f3;
  --muted: #b2b2b2;
  --muted-2: #969696;
  --line: #2d2d2d;
  --line-strong: #4a4a4a;
  --blue: #90b5ff;
  --blue-hover: #a8c5ff;
  --blue-soft: #0b1423;
  --green: #76d2a7;
  --green-soft: #071910;
  --amber: #f1b96d;
  --amber-soft: #1b1205;
  --red: #ff8c91;
  --red-soft: #1c080c;
  --on-accent: #000000;

  /* Existing product pages use these aliases for the same shared colors. */
  --card: var(--surface);
  --canvas: var(--bg);
  --ink: var(--text);
  --soft: var(--surface-soft);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --divider: var(--line);
  --primary: var(--blue);
  --primary-dark: var(--blue-hover);
  --primary-soft: var(--blue-soft);
  --brand: var(--blue);
  --brand-hover: var(--blue-hover);
  --on-primary: var(--on-accent);
  --danger: var(--red);
  --success: var(--green);
  --red-bg: var(--red-soft);
  --green-bg: var(--green-soft);
  --amber-bg: var(--amber-soft);
  --neutral-text: var(--muted);
  --label-text: #dedede;
  --topbar-bg: rgba(11, 11, 11, .98);
  --overlay: rgba(0, 0, 0, .72);
  --loading-overlay: rgba(0, 0, 0, .82);

  --icon-blue: #82a8ff;
  --icon-sky: #69c1f0;
  --icon-teal: #58d2c0;
  --icon-green: #67d6aa;
  --icon-amber: #efb85d;
  --icon-orange: #f29a67;
  --icon-red: #ff8797;
  --icon-purple: #b69aff;
  --icon-pink: #ec91c5;
  --icon-light-gray: #c1c9d4;

  --shadow: 0 18px 46px rgba(0, 0, 0, .34);
  --small-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  --focus: 0 0 0 3px rgba(144, 181, 255, .3);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

html[data-theme="dark"] :where(
  .header-nav-button,
  .shell-icon-button,
  .icon-button,
  .close-button,
  .button-secondary
):hover:not(:disabled) {
  background: var(--hover);
}