/* Automatic theme. Palette: backup funify_v1_002.css final GitHub-style theme. */
:root {
  color-scheme: light dark;
}

/* Legacy manual theme controls are superseded by the browser preference. */
:is(#themeToggle, .topbar-theme-button, .mobile-theme-button, [data-theme-toggle]) {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root,
  :root[data-theme] {
    color-scheme: dark;
    --color-background: #0d1117;
    --color-surface: #161b22;
    --color-text: #e6edf3;
    --color-muted: #8b949e;
    --color-border: #30363d;
    --color-primary: #2f81f7;
    --color-inset: #010409;
    --color-hover: #21262d;
    --color-link: #58a6ff;
    --common-ink: var(--color-text);
    --common-blue: #8ab6ff;
    --ink: var(--color-text);
    --muted: var(--color-muted);
    --page: var(--color-background);
    --bg: var(--color-background);
    --surface: var(--color-surface);
    --card: var(--color-surface);
    --text: var(--color-text);
    --border: var(--color-border);
    --line: var(--color-border);
    --brand: var(--color-primary);
    --input-bg: #0b1326;
    --input-border: #1b2440;
    --ring: #6aa4ff40;
    --gh-canvas: #0d1117;
    --gh-canvas-subtle: #161b22;
    --gh-canvas-inset: #010409;
    --gh-border: #30363d;
    --gh-border-muted: #21262d;
    --gh-fg: #e6edf3;
    --gh-muted: #8b949e;
    --gh-accent: #2f81f7;
    --gh-accent-subtle: #388bfd24;
    --gh-header: #010409;
    --gh-shadow: 0 8px 24px #01040961;
    --posts-ink: var(--color-text);
    --posts-muted: var(--color-muted);
    --posts-line: var(--color-border);
    --posts-soft: var(--color-surface);
    --posts-blue: var(--color-primary);
    --privacy-ink: var(--color-text);
    --privacy-muted: var(--color-muted);
    --privacy-page: var(--color-background);
    --privacy-card: var(--color-surface);
    --privacy-line: var(--color-border);
    --privacy-soft: var(--color-hover);
    --privacy-blue: var(--color-link);
    --about-bg: var(--color-background);
    --about-surface: var(--color-surface);
    --about-surface-soft: var(--color-hover);
    --about-text: var(--color-text);
    --about-muted: var(--color-muted);
    --about-border: var(--color-border);
    --about-accent: #8ab6ff;
    --about-accent-strong: #a5ccff;
    --about-accent-soft: #1b2440;
    --about-blue: var(--color-link);
    --about-blue-soft: #1b2440;
  }

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

  a {
    color: var(--color-link);
  }

  body:not(.common-header-overlay):not(.about-home-page):not(.home-page) {
    background: var(--color-background);
  }

  .site-header::before {
    display: none;
  }

  .site-header .tagline {
    text-shadow: none;
  }

  .site-header {
    border-color: var(--color-border);
  }

  .site-header .search {
    background: #161b22ed;
    box-shadow: 0 7px 20px #01040940;
  }

  .site-header .search input {
    color: var(--color-text);
  }

  .site-header .search input::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }

  .site-header .site-menu,
  .site-search-popover {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
  }

  .site-header .site-menu a {
    color: var(--color-text);
  }

  .site-header .site-menu a:hover,
  .site-header .site-menu a[aria-current='page'],
  .site-search-result:hover,
  .site-search-result[aria-selected='true'] {
    background: var(--color-hover);
    color: var(--color-link);
  }

  .site-search-status,
  .site-search-result {
    border-color: var(--color-border);
  }

  .site-search-result {
    color: var(--color-text);
  }

  .site-search-result-meta,
  .site-search-status {
    color: var(--color-muted);
  }

  .site-search-result-badge {
    background: #388bfd24;
    color: #8ab6ff;
  }

  /* Home cards and hero keep their original illustrations and category colours. */
  .home-page .hero {
    background-color: #161b22;
    background-blend-mode: soft-light;
  }

  .home-page .hero-copy::before {
    background: radial-gradient(
      ellipse at 32% 48%,
      #0d1117f2,
      #0d1117c7 42%,
      #0d111766 57%,
      transparent 72%
    );
  }

  .home-page .hero-copy {
    color: var(--color-text);
  }

  .home-page .hero-copy p,
  .home-page .section-head p,
  .home-page .sim-card p,
  .home-page .split p {
    color: #a4aebb;
  }

  .home-page .sim-card {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .home-page .featured {
    background: var(--color-background);
  }

  .home-page .curious {
    background-image:
      linear-gradient(
        180deg,
        #0d1117 0%,
        #0d1117 14%,
        transparent 27%,
        transparent 73%,
        #0d1117 86%,
        #0d1117 100%
      ),
      url('/resources/pic/home/middle background.webp');
  }

  .home-page .dark-button {
    background: #21262d;
    color: var(--color-text);
  }

  .home-page :is(.curious, .values) a {
    color: #fff;
  }

  /* Category dialog retains its per-world accent colours. */
  .category-dialog {
    background: var(--color-background);
    border-color: var(--color-border);
  }

  .category-dialog-heading {
    border-color: var(--color-border);
    background:
      radial-gradient(
        ellipse at 94% 8%,
        color-mix(in srgb, var(--world-b) 18%, transparent),
        transparent 58%
      ),
      var(--color-surface);
  }

  .category-dialog[data-world] {
    --world-ink: color-mix(in srgb, var(--world-b) 65%, white);
  }

  .category-dialog-close {
    color: var(--color-text);
  }

  #categoryDialogDescription,
  .category-result-count,
  .category-page-description,
  .category-dialog-message,
  .category-dialog-footer {
    color: #a4aebb;
  }

  .category-dialog-worlds button {
    color: var(--color-muted);
  }

  .category-dialog-worlds button:hover,
  .category-dialog-worlds button[aria-pressed='true'] {
    background: var(--color-hover);
    border-color: var(--color-border);
    color: var(--world-ink);
  }

  .category-page-card,
  .category-dialog-retry {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .category-type-group + .category-type-group,
  .category-dialog-footer {
    border-color: var(--color-border);
  }

  /* Article surfaces, inline code, tables, and simulator links. */
  .post-site-header,
  .repo-hero,
  .post-page
    :is(
      .calculator-panel,
      .calculator-aside-section,
      .calculator-related-section,
      .calculator-related-card
    ) {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  .post-page
    :is(
      .calculator-panel-head h2,
      .post-article-body,
      .post-article-body h2,
      .post-article-body h3,
      .post-article-body strong,
      .post-author-card h2,
      .calculator-related-card,
      .calculator-related-card strong
    ) {
    color: var(--color-text);
  }

  .post-page
    :is(
      .calculator-kicker,
      .post-article-meta,
      .post-author-card p,
      .calculator-related-card span
    ) {
    color: #a4aebb;
  }

  .post-article-body a {
    color: var(--color-link);
  }

  .post-article-body code {
    background: var(--color-hover);
    color: #a5ccff;
  }

  .post-article-body th {
    color: var(--color-text);
  }

  .post-article-body :is(th, td),
  .repo-tabs {
    border-color: var(--color-border);
  }

  .post-language-link {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  .post-article-body a.simulation-link {
    background: linear-gradient(120deg, #161b22, #1b2440);
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .post-article-body a.simulation-link:hover {
    background: #21262d;
    border-color: var(--color-primary);
  }

  .simulation-link small {
    color: #8ab6ff;
  }

  /* Existing simulator variables already carry most of the dark theme. */
  .simulator-page {
    --simulator-muted: var(--color-muted);
  }

  .simulator-page .hero {
    background: var(--color-surface);
  }

  .simulator-page .hero::after {
    background:
      linear-gradient(90deg, #0d1117fa 0%, #0d1117ed 29%, #0d11178c 46%, #0d111700 70%),
      url('/resources/pic/categories/computer-hero.webp') center/cover no-repeat;
  }

  .simulator-page .hero .lead {
    color: #a4aebb;
  }

  /* Legal and About page accents use the same backup surface palette. */
  .legal-header {
    background: linear-gradient(135deg, #161b22, #1b2440);
  }

  .legal-actions a:not(.primary) {
    background: var(--color-surface);
  }

  .legal-page :is(blockquote, .legal-note) {
    background: var(--color-hover);
  }

  html[data-theme='dark'] .about-page :is(.section-group, .about-overview, .hero-profile) {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  html[data-theme='dark'] .about-page .hero {
    background: linear-gradient(145deg, var(--color-surface), var(--color-background));
  }

  html[data-theme='dark'] .about-page .hero-lead {
    color: #a4aebb;
  }

  html[data-theme='dark'] .about-page :is(.eyebrow, .hero-title-line:last-child) {
    color: var(--color-link);
  }

  html[data-theme='dark'] .about-page .button-secondary {
    background: var(--color-hover);
    color: var(--color-text);
  }

  html[data-theme='dark'] .about-page .hero-profile::before {
    background: radial-gradient(circle, #388bfd24, transparent 70%);
  }
}