@layer brewery-themes {
  /* The dark palette applies when the browser prefers dark and the account has
     not chosen light, or whenever the account has chosen dark. Both blocks
     must stay identical; `data-theme` on <html> carries the account choice. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0f1113;
      --fg: #e7e8e3;
      --muted: #aab3c2;
      --faint: #828893;
      --text-tertiary: #aab3c2;
      --line: #262a2e;
      --line-strong: #353a40;
      --border-control: #555b60;
      --panel: #15171a;
      --field: #191c1f;
      --accent: #ef9f56;
      --accent-strong: #f3ad6b;
      --accent-soft: #2a1c12;
      --on-accent: #1c1206;
      --on-danger: #220c0b;
      --danger: #f97066;
      --success: #4ade80;
      --warning: #facc15;
      --state-open: #4ade80;
      --state-merged: #a78bfa;
      --code-bg: #181b1e;
      --code-fg: #dce3ec;
    }
    @scope (html:not([data-theme="light"]) > .brewery) {
      .highlight .a-k {
        color: #c4b5fd;
      }
      .highlight .a-f {
        color: #7dd3fc;
      }
      .highlight .a-m {
        color: #5eead4;
      }
      .highlight .a-s {
        color: #86efac;
      }
      .highlight .a-n,
      .highlight .a-co {
        color: #fbbf24;
      }
      .highlight .a-c {
        color: #94a3b8;
      }
      .highlight .a-t {
        color: #f0a35a;
      }
      .highlight .a-v {
        color: #cbd5e1;
      }
      .highlight .a-p,
      .highlight .a-o {
        color: #94a3b8;
      }
      .highlight .a-pr {
        color: #67e8f9;
      }
      .highlight .a-at {
        color: #fcd34d;
      }
      .highlight .a-tg {
        color: #fda4af;
      }
      .highlight .a-l {
        color: #a5b4fc;
      }
      .highlight .a-ns {
        color: #cbd5e1;
      }
      .highlight .a-cr {
        color: #e9a8fb;
      }
      .highlight .a-tu {
        color: #7dd3fc;
      }
      .highlight .a-tl {
        color: #86efac;
      }
    }
  }
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1113;
    --fg: #e7e8e3;
    --muted: #aab3c2;
    --faint: #828893;
    --text-tertiary: #aab3c2;
    --line: #262a2e;
    --line-strong: #353a40;
    --border-control: #555b60;
    --panel: #15171a;
    --field: #191c1f;
    --accent: #ef9f56;
    --accent-strong: #f3ad6b;
    --accent-soft: #2a1c12;
    --on-accent: #1c1206;
    --on-danger: #220c0b;
    --danger: #f97066;
    --success: #4ade80;
    --warning: #facc15;
    --state-open: #4ade80;
    --state-merged: #a78bfa;
    --code-bg: #181b1e;
    --code-fg: #dce3ec;
  }
  @scope (html[data-theme="dark"] > .brewery) {
    .highlight .a-k {
      color: #c4b5fd;
    }
    .highlight .a-f {
      color: #7dd3fc;
    }
    .highlight .a-m {
      color: #5eead4;
    }
    .highlight .a-s {
      color: #86efac;
    }
    .highlight .a-n,
    .highlight .a-co {
      color: #fbbf24;
    }
    .highlight .a-c {
      color: #94a3b8;
    }
    .highlight .a-t {
      color: #f0a35a;
    }
    .highlight .a-v {
      color: #cbd5e1;
    }
    .highlight .a-p,
    .highlight .a-o {
      color: #94a3b8;
    }
    .highlight .a-pr {
      color: #67e8f9;
    }
    .highlight .a-at {
      color: #fcd34d;
    }
    .highlight .a-tg {
      color: #fda4af;
    }
    .highlight .a-l {
      color: #a5b4fc;
    }
    .highlight .a-ns {
      color: #cbd5e1;
    }
    .highlight .a-cr {
      color: #e9a8fb;
    }
    .highlight .a-tu {
      color: #7dd3fc;
    }
    .highlight .a-tl {
      color: #86efac;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @scope (.brewery) {
      *,
      ::before,
      ::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
      .repo-card:hover {
        transform: none;
      }
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.brewery) {
    scroll-behavior: smooth;
  }
}