/* Artwork-derived Deskrawl palette; these are site design choices, not official
 * game color tokens. The shared template switches .dark/.light on <html>. */
:root .site-header .brand > div[aria-hidden="true"],
:root .site-header .brand > div[aria-hidden="true"]:hover {
  background: url('/images/brand/icon-96.png?v=dragon-1') center / contain no-repeat;
  font-size: 0;
  color: transparent;
  flex-shrink: 0;
}

:root.dark {
  --nav-theme: 35.0562 91.7526% 61.9608%; /* Amber #F7AD45 */
  --nav-theme-light: 38.0153 91.6084% 71.9608%; /* Pale gold #F9C976 */
  --background: 222.8571 17.0732% 8.0392%; /* Charcoal #111318 */
  --card: 216.9231 19.4030% 13.1373%; /* Slate #1B2028 */
  --popover: var(--card);
  --foreground: 210 26.3158% 92.549%; /* Soft white #E7ECF1 */
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --muted-foreground: 214.7368 15.7025% 76.2745%; /* Silver #B9C1CC */
  --border: 214.2857 16.8% 24.5098%; /* Slate border #343D49 */
  --input: var(--border);
  --ring: var(--nav-theme);
}

:root.light {
  --nav-theme: 31.9231 89.6552% 34.1176%; /* Deep amber #A55C09 */
  --nav-theme-light: 32.64 81.6993% 30%; /* Bronze link #8B520E */
  --background: 40 42.8571% 97.2549%; /* Warm ivory #FBF9F5 */
  --card: 0 0% 100%; /* White #FFFFFF */
  --popover: var(--card);
  --foreground: 216.9231 16.8831% 15.098%; /* Ink #20252D */
  --card-foreground: var(--foreground);
  --popover-foreground: var(--foreground);
  --muted-foreground: 216.5217 11.5578% 39.0196%; /* Gray #58616F */
  --border: 39 20.4082% 80.7843%; /* Sand #D8D1C4 */
  --input: var(--border);
  --ring: var(--nav-theme);
}

/* Gold needs dark lettering. Light-mode deep amber retains white lettering. */
:root.dark [class~="bg-[hsl(var(--nav-theme))]"] {
  color: #111318;
}
:root.light [class~="bg-[hsl(var(--nav-theme))]"] {
  color: #ffffff;
}
:root.light [class~="bg-[hsl(var(--nav-theme))]"]:hover {
  background-color: #8b520e;
}

/* Blue-500 is too light for small white step numbers and category buttons.
 * Blue-700 gives those labels sufficient contrast. */
.article-page [class~="bg-blue-500"][class~="text-white"] {
  background-color: #1d4ed8;
}
.article-page [class~="bg-blue-500"][class~="text-white"]:hover {
  background-color: #1e40af;
}
:root.light .group:hover [class~="group-hover:text-blue-400"] {
  color: hsl(var(--nav-theme-light));
}
:root.light main [class~="text-green-400"][class~="bg-green-500/20"] {
  color: #166534;
}

/* Keep keyboard navigation as clear as pointer hover. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid hsl(var(--nav-theme-light));
  outline-offset: 4px;
}

/* The full menu needs more space than the template's 768px breakpoint allows.
 * Use its existing accessible collapsed menu on phones and tablets. */
@media (max-width: 1023px) {
  .site-header [class~="md:flex"] { display: none !important; }
  .site-header [class~="md:hidden"]:not([hidden]) { display: block; }
}