/* Keep this media rule first: theme.js updates it before the first paint. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cream: #1b141c;
    --cream-deep: #302331;
    --paper: #271e29;
    --ink: #f4e8ef;
    --plum: #efb8dd;
    --plum-deep: #fff1f8;
    --muted: #c9b6c6;
    --filled-button-hover: #fff1f8;
    --outlined-button-hover: rgba(255, 241, 248, 0.12);
    --outlined-button-hover-text: #fff1f8;
    --outlined-button-hover-border: #fff1f8;
    --line: rgba(239, 184, 221, 0.2);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    --panel-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 14px 36px rgba(0, 0, 0, 0.2);
  }

  .site-header {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  }

  .hero {
    background:
      radial-gradient(ellipse at 92% 15%, rgba(143, 67, 113, 0.16), transparent 57%),
      radial-gradient(ellipse at 2% 92%, rgba(179, 117, 46, 0.08), transparent 55%),
      linear-gradient(125deg, var(--cream), #251b25);
  }

  .development-strip,
  .signal-brief,
  .product-card,
  .library-card {
    border-color: var(--line);
    box-shadow: var(--panel-shadow);
  }

  .development-strip,
  .library-card {
    background: var(--paper);
  }

  .development-link {
    background: var(--cream);
  }

  .development-link:hover,
  .development-link:focus-within {
    background: var(--cream-deep);
  }

  .development-link:hover,
  .development-link:focus-within,
  .library-card:hover,
  .library-card:focus-visible {
    border-color: var(--plum);
  }

  .signal-brief,
  .product-cat {
    background: linear-gradient(135deg, var(--paper), #332333);
  }

  .products {
    background: #171119;
  }

  /* These panels already use light text; keep their backgrounds dark. */
  .product-codex {
    background: linear-gradient(135deg, #3c062d, #590540);
  }

  .product-cat .feature-list li {
    border-color: var(--line);
  }

  /* Preserve the original backing for the externally supplied product logos. */
  .development-codex,
  .codex-icon {
    background: #fff8ef;
  }

  .closing-card {
    box-shadow: var(--panel-shadow);
  }

  .button-plum,
  .button-primary,
  .skip-link {
    color: #2c1028;
  }

  .logo-light {
    display: none;
  }

  .brand .logo-dark,
  .footer-brand .logo-dark {
    display: block;
  }
}