/* Champagne content surfaces. The existing navigation is outside this scope. */
.dr-theme {
  --dr-content-bg: #f6f6f3;
  --dr-content-surface: #ffffff;
  --dr-content-raised: #fdfbf7;
  --dr-content-fill: #eff0f2;
  --dr-content-text: #292a2e;
  --dr-content-muted: #74747c;
  --dr-content-icon: #73747b;
  --dr-content-line: #e3e1db;
  --dr-content-accent: #946e34;
  --dr-content-accent-soft: #f4eddd;
  --dr-content-on-accent: #ffffff;
  --dr-content-metal-light: #f5d795;
  --dr-content-metal-dark: #9e7338;
  --dr-content-gold-border: #b99b5b55;
  --dr-content-highlight: #ffffffb3;
  --dr-content-shadow: 0 8px 24px #332f2208;
}

.dr-theme.dr-dark {
  --dr-content-bg: #090909;
  --dr-content-surface: #191919;
  --dr-content-raised: #22211f;
  --dr-content-fill: #282828;
  --dr-content-text: #f4f1e9;
  --dr-content-muted: #aaa6a0;
  --dr-content-icon: #c8c4bd;
  --dr-content-line: #ffffff1f;
  --dr-content-accent: #e9c67c;
  --dr-content-accent-soft: #2b251a;
  --dr-content-on-accent: #241d11;
  --dr-content-metal-light: #ffe4a6;
  --dr-content-metal-dark: #98703c;
  --dr-content-gold-border: #e9c67c4d;
  --dr-content-highlight: #ffffff12;
  --dr-content-shadow: 0 10px 28px #00000024;
}

.dr-theme :is(.dr-main, .dr-sheet, .dr-shell-menu, .auth-modal, .mac-site-card-layer, .mac-confirm-dialog, .mac-share-sheet, .mac-recharge-sheet) {
  --dr-bg: var(--dr-content-bg);
  --dr-surface: var(--dr-content-surface);
  --dr-surface-raised: var(--dr-content-raised);
  --dr-fill: var(--dr-content-fill);
  --dr-text: var(--dr-content-text);
  --dr-muted: var(--dr-content-muted);
  --dr-icon: var(--dr-content-icon);
  --dr-line: var(--dr-content-line);
  --dr-accent: var(--dr-content-accent);
  --dr-accent-soft: var(--dr-content-accent-soft);
  --dr-on-accent: var(--dr-content-on-accent);
  --dr-metal-light: var(--dr-content-metal-light);
  --dr-metal-dark: var(--dr-content-metal-dark);
  --dr-gold-border: var(--dr-content-gold-border);
  --dr-highlight: var(--dr-content-highlight);
  --dr-shadow: var(--dr-content-shadow);
  --c-bg: var(--dr-bg);
  --c-surface: var(--dr-surface);
  --c-surface-2: var(--dr-fill);
  --c-text: var(--dr-text);
  --c-text-strong: var(--dr-text);
  --c-text-muted: var(--dr-muted);
  --c-border: var(--dr-line);
  --c-accent: var(--dr-accent);
  --c-accent-hover: var(--dr-metal-dark);
  --c-accent-soft: var(--dr-accent-soft);
  --c-accent-tint: color-mix(in srgb, var(--dr-accent) 18%, var(--dr-surface));
  --c-accent-glow: color-mix(in srgb, var(--dr-accent) 12%, transparent);
  --c-accent-border: var(--dr-gold-border);
  --c-accent-border-strong: var(--dr-accent);
  --c-accent-focus-ring: var(--dr-accent);
  --c-accent-ink: var(--dr-on-accent);
  --c-on-accent: var(--dr-on-accent);
  --c-link: var(--dr-accent);
  --c-link-hover: var(--dr-accent);
  --c-link-soft: var(--dr-accent-soft);
  --c-surface-muted: var(--dr-fill);
  --bg-deep: var(--dr-bg);
  /* Resolve derived tokens here too: inherited root gradients otherwise keep
     the generic Kit palette even when their source colors are overridden. */
  --gradient-hero: radial-gradient(ellipse at 100% 0, var(--dr-accent-soft), transparent 65%), var(--dr-surface);
  --gradient-hero-minimal: linear-gradient(135deg, var(--dr-surface), var(--dr-surface-raised));
  --gradient-brand: linear-gradient(115deg, var(--dr-metal-light), var(--dr-accent), var(--dr-metal-dark));
  --gradient-tile-primary: linear-gradient(180deg, var(--dr-surface), var(--dr-accent-soft));
  --gradient-tile-minimal: linear-gradient(180deg, var(--dr-surface), var(--dr-fill));
  --gradient-hero-band: linear-gradient(90deg, var(--dr-accent-soft), var(--dr-surface));
  --shadow-card: var(--dr-shadow);
  --shadow-member-card: var(--dr-shadow);
  --shadow-interactive: var(--dr-shadow);
  --shadow-focus: 0 0 0 3px var(--dr-accent-soft);
  color: var(--dr-text);
}

.dr-theme .dr-main {
  background: var(--dr-bg);
}

.dr-theme .dr-main .is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dr-theme .dr-main .dr-button {
  border: 1px solid var(--dr-gold-border);
  background: linear-gradient(115deg, var(--dr-metal-light), var(--dr-accent) 52%, var(--dr-metal-dark));
  color: #241d11 !important;
  box-shadow: inset 0 1px 0 var(--dr-highlight);
}

.dr-theme .dr-main :is(.dr-detail, .dr-person) {
  --dr-text: var(--dr-content-text);
  --dr-muted: var(--dr-content-muted);
  --dr-surface: var(--dr-content-surface);
  --dr-line: var(--dr-content-line);
  background: var(--dr-bg);
  color: var(--dr-text);
}

.dr-theme .dr-main .dr-detail :is(.dr-intro, .dr-detail-hero small) {
  color: var(--dr-muted);
}

.dr-theme .dr-main .dr-detail .dr-tags a {
  color: var(--dr-muted);
  background: var(--dr-fill);
}

.dr-theme .dr-main :is(.dr-person-works, .dr-compat-card, .dr-score, .dr-reviews article) {
  background: var(--dr-surface);
  border: 1px solid var(--dr-line);
  box-shadow: var(--dr-shadow);
}

.dr-theme .dr-main .dr-rank-hero {
  background: radial-gradient(ellipse at 90% 0, var(--dr-accent-soft), transparent 70%), var(--dr-surface);
}

.dr-theme .dr-main .dr-rank-hero :is(p, small) {
  color: var(--dr-muted);
}

.dr-theme .dr-main :is(.dr-search, .dr-shell-search) {
  border: 1px solid var(--dr-line);
  background-color: var(--dr-surface);
}

.dr-theme .dr-main .dr-pagination :is(a, span) {
  color: var(--dr-muted);
  background: var(--dr-fill);
  border: 1px solid var(--dr-line);
}

.dr-theme .dr-main .dr-pagination .current {
  color: var(--dr-accent);
  border-color: var(--dr-gold-border);
  background: var(--dr-accent-soft);
}

.dr-theme .dr-main :is(.dr-chip:has(input:checked), .dr-chip.is-active) {
  box-shadow: inset 0 0 0 1px var(--dr-gold-border);
}

@media (prefers-reduced-motion: reduce) {
  .dr-theme .dr-main .dr-button { transition: none; }
}