:root {
  --color-base-100: oklch(0.99 0.0074 197.04);
  --color-base-200: oklch(0.96 0.0085 197.02);
  --color-base-300: oklch(0.95 0.0106 196.98);
  --color-base-content: oklch(19.742% 0.004 123.72);
  --color-primary: oklch(60% 0.118 184.704);
  --color-primary-content: oklch(98% 0.003 247.858);
  --color-secondary: oklch(59.606% 0.11727 170.609);
  --color-secondary-content: oklch(98% 0.002 247.839);
  --color-accent: oklch(56.568% 0.10627 175.461);
  --color-accent-content: oklch(17.078% 0.04 100.73);
  --color-neutral: oklch(19.574% 0.0133 196.212);
  --color-neutral-content: oklch(86.196% 0.015 108.6);
  --color-info: oklch(86.19% 0.047 224.14);
  --color-info-content: oklch(17.238% 0.009 224.14);

  /* Backward-compatible magazine aliases */
  --mag-page-bg: var(--color-base-200);
  --mag-surface-bg: var(--color-base-100);
  --mag-surface-alt-bg: var(--color-base-300);
  --mag-surface-strong-bg: color-mix(in oklch, var(--color-base-300) 70%, var(--color-base-100));
  --mag-ink: var(--color-base-content);
  --mag-ink-soft: color-mix(in oklch, var(--color-base-content) 76%, var(--color-base-100));
  --mag-ink-faint: color-mix(in oklch, var(--color-base-content) 56%, var(--color-base-100));
  --mag-rule: var(--color-base-300);
  --mag-border: var(--color-base-300);
  --mag-border-strong: var(--color-base-content);
  --mag-accent: var(--color-secondary);
  --mag-accent-soft: var(--color-primary);
  --mag-accent-contrast: var(--color-primary-content);
  --mag-accent-inverse: color-mix(in oklch, var(--color-secondary) 20%, var(--color-base-content));
}

html,
body {
  background: var(--color-base-200);
  color: var(--color-base-content);
}

body.magazine-page {
  background: var(--color-base-200);
  color: var(--color-base-content);
}

[data-mag-theme="dark"] {
  --color-base-100: oklch(27% 0.046 192.524);
  --color-base-200: oklch(23% 0.04 192.524);
  --color-base-300: oklch(19% 0.034 192.524);
  --color-base-content: oklch(98% 0.003 247.858);
  --color-primary: oklch(86.19% 0.047 224.14);
  --color-primary-content: oklch(17.238% 0.009 224.14);
  --color-secondary: oklch(56.568% 0.10627 175.461);
  --color-secondary-content: oklch(17.078% 0.04 100.73);
  --color-accent: oklch(52% 0.105 223.128);
  --color-accent-content: oklch(98% 0.002 247.839);
  --color-neutral: oklch(33% 0.028 192.524);
  --color-neutral-content: oklch(98% 0.003 247.858);
  --color-info: oklch(86.19% 0.047 224.14);
  --color-info-content: oklch(17.238% 0.009 224.14);

  --mag-page-bg: var(--color-base-200);
  --mag-surface-bg: var(--color-base-100);
  --mag-surface-alt-bg: var(--color-base-300);
  --mag-surface-strong-bg: color-mix(in oklch, var(--color-base-300) 70%, var(--color-base-100));
  --mag-ink: var(--color-base-content);
  --mag-ink-soft: color-mix(in oklch, var(--color-base-content) 76%, var(--color-base-200));
  --mag-ink-faint: color-mix(in oklch, var(--color-base-content) 56%, var(--color-base-200));
  --mag-rule: var(--color-base-300);
  --mag-border: var(--color-base-300);
  --mag-border-strong: var(--color-base-content);
  --mag-accent: var(--color-secondary);
  --mag-accent-soft: var(--color-primary);
  --mag-accent-contrast: var(--color-primary-content);
  --mag-accent-inverse: color-mix(in oklch, var(--color-secondary) 20%, var(--color-base-content));
}

[data-mag-theme="ink"] {
  --color-base-100: oklch(19% 0 0);
  --color-base-200: oklch(17% 0 0);
  --color-base-300: oklch(14% 0 0);
  --color-base-content: oklch(98% 0 0);
  --color-primary: oklch(88% 0.15 88);
  --color-primary-content: oklch(17% 0 0);
  --color-secondary: oklch(82% 0.12 200);
  --color-secondary-content: oklch(17% 0 0);
  --color-accent: oklch(76% 0.14 150);
  --color-accent-content: oklch(17% 0 0);
  --color-neutral: oklch(27% 0 0);
  --color-neutral-content: oklch(98% 0 0);
  --color-info: oklch(80% 0.08 230);
  --color-info-content: oklch(17% 0 0);

  --mag-page-bg: var(--color-base-200);
  --mag-surface-bg: var(--color-base-100);
  --mag-surface-alt-bg: var(--color-base-300);
  --mag-surface-strong-bg: color-mix(in oklch, var(--color-base-300) 70%, var(--color-base-100));
  --mag-ink: var(--color-base-content);
  --mag-ink-soft: color-mix(in oklch, var(--color-base-content) 76%, var(--color-base-200));
  --mag-ink-faint: color-mix(in oklch, var(--color-base-content) 56%, var(--color-base-200));
  --mag-rule: var(--color-base-300);
  --mag-border: var(--color-base-300);
  --mag-border-strong: var(--color-base-content);
  --mag-accent: var(--color-secondary);
  --mag-accent-soft: var(--color-primary);
  --mag-accent-contrast: var(--color-primary-content);
  --mag-accent-inverse: color-mix(in oklch, var(--color-secondary) 20%, var(--color-base-content));
}

.magazine-page {
  background: var(--color-base-200);
  color: var(--color-base-content);
}

.magazine-section,
.magazine-surface {
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.magazine-surface-alt {
  background: var(--color-base-300);
  color: var(--color-base-content);
}

.magazine-surface-strong {
  background: var(--mag-surface-strong-bg);
  color: var(--color-base-content);
}

.magazine-rule {
  border-top: 3px solid var(--mag-rule) !important;
}

.magazine-divider {
  border-color: var(--mag-border) !important;
}

.magazine-border {
  border-color: var(--mag-border) !important;
}

.magazine-ink {
  color: var(--color-base-content) !important;
}

.magazine-ink-soft {
  color: var(--mag-ink-soft) !important;
}

.magazine-ink-faint {
  color: var(--mag-ink-faint) !important;
}

.magazine-accent {
  color: var(--color-primary) !important;
}

.magazine-accent-ink {
  color: var(--color-secondary) !important;
}

.magazine-accent-bg {
  background: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
}

.magazine-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.magazine-panel {
  border-color: var(--mag-border) !important;
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.magazine-panel-alt {
  border-color: var(--mag-border) !important;
  background: var(--color-base-300);
  color: var(--color-base-content);
}

.magazine-link {
  color: var(--color-primary) !important;
}

.magazine-link:hover {
  color: var(--color-secondary) !important;
}

.magazine-muted {
  color: var(--mag-ink-soft) !important;
}

.magazine-faint {
  color: var(--mag-ink-faint) !important;
}

.magazine-separator {
  border-color: var(--mag-border-strong) !important;
}

.bg-base-100 { background: var(--color-base-100) !important; }
.bg-base-200 { background: var(--color-base-200) !important; }
.bg-base-300 { background: var(--color-base-300) !important; }
.bg-base-content { background: var(--color-base-content) !important; color: var(--color-base-100) !important; }
.text-base-content { color: var(--color-base-content) !important; }
.text-base-content-soft { color: color-mix(in oklch, var(--color-base-content) 72%, transparent) !important; }
.text-base-content-faint { color: color-mix(in oklch, var(--color-base-content) 52%, transparent) !important; }
.border-base-content { border-color: var(--color-base-content) !important; }
.border-base-300 { border-color: var(--color-base-300) !important; }
.border-base-200 { border-color: var(--color-base-200) !important; }

.bg-primary { background: var(--color-primary) !important; color: var(--color-primary-content) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-primary-content { color: var(--color-primary-content) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.bg-secondary { background: var(--color-secondary) !important; color: var(--color-secondary-content) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-secondary-content { color: var(--color-secondary-content) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

.bg-accent { background: var(--color-accent) !important; color: var(--color-accent-content) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-accent-content { color: var(--color-accent-content) !important; }
.border-accent { border-color: var(--color-accent) !important; }

.bg-info { background: var(--color-info) !important; color: var(--color-info-content) !important; }
.text-info { color: var(--color-info) !important; }
.text-info-content { color: var(--color-info-content) !important; }
.border-info { border-color: var(--color-info) !important; }

.bg-neutral { background: var(--color-neutral) !important; color: var(--color-neutral-content) !important; }
.text-neutral { color: var(--color-neutral) !important; }
.text-neutral-content { color: var(--color-neutral-content) !important; }
.border-neutral { border-color: var(--color-neutral) !important; }

/* Explicit hover utilities for Tailwind CDN */
.hover\:bg-base-100:hover { background: var(--color-base-100) !important; }
.hover\:bg-base-200:hover { background: var(--color-base-200) !important; }
.hover\:bg-base-300:hover { background: var(--color-base-300) !important; }
.hover\:bg-base-content:hover { background: var(--color-base-content) !important; color: var(--color-base-100) !important; }
.hover\:bg-primary:hover { background: var(--color-primary) !important; color: var(--color-primary-content) !important; }
.hover\:bg-secondary:hover { background: var(--color-secondary) !important; color: var(--color-secondary-content) !important; }
.hover\:bg-accent:hover { background: var(--color-accent) !important; color: var(--color-accent-content) !important; }
.hover\:bg-info:hover { background: var(--color-info) !important; color: var(--color-info-content) !important; }
.hover\:bg-neutral:hover { background: var(--color-neutral) !important; color: var(--color-neutral-content) !important; }

.hover\:text-base-content:hover { color: var(--color-base-content) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:text-secondary:hover { color: var(--color-secondary) !important; }
.hover\:text-accent:hover { color: var(--color-accent) !important; }
.hover\:text-info:hover { color: var(--color-info) !important; }
.hover\:text-neutral:hover { color: var(--color-neutral) !important; }

.hover\:border-base-content:hover { border-color: var(--color-base-content) !important; }
.hover\:border-primary:hover { border-color: var(--color-primary) !important; }
.hover\:border-secondary:hover { border-color: var(--color-secondary) !important; }
.hover\:border-accent:hover { border-color: var(--color-accent) !important; }
.hover\:border-info:hover { border-color: var(--color-info) !important; }
.hover\:border-neutral:hover { border-color: var(--color-neutral) !important; }

.group:hover .group-hover\:text-primary { color: var(--color-primary) !important; }
.group:hover .group-hover\:text-secondary { color: var(--color-secondary) !important; }
.group:hover .group-hover\:text-accent { color: var(--color-accent) !important; }
.group:hover .group-hover\:text-info { color: var(--color-info) !important; }
.group:hover .group-hover\:text-neutral { color: var(--color-neutral) !important; }
.group:hover .group-hover\:text-base-content { color: var(--color-base-content) !important; }

.group:hover .group-hover\:bg-primary { background: var(--color-primary) !important; color: var(--color-primary-content) !important; }
.group:hover .group-hover\:bg-secondary { background: var(--color-secondary) !important; color: var(--color-secondary-content) !important; }
.group:hover .group-hover\:bg-accent { background: var(--color-accent) !important; color: var(--color-accent-content) !important; }
.group:hover .group-hover\:bg-info { background: var(--color-info) !important; color: var(--color-info-content) !important; }
.group:hover .group-hover\:bg-neutral { background: var(--color-neutral) !important; color: var(--color-neutral-content) !important; }