:root {
  --bg: #f7fafe;
  --surface: #ffffff;
  --surface-2: #edf3fc;
  --text: #1b3049;
  --muted: #5c7087;
  --accent: #2c63d9;
  --accent-2: #4e83ea;
  --border: rgba(27, 48, 73, 0.16);
}

:root[data-theme="executive-azure"][data-mode="light"] {
  --bg: #f7fafe;
  --surface: #ffffff;
  --surface-2: #edf3fc;
  --text: #1b3049;
  --muted: #5c7087;
  --accent: #2c63d9;
  --accent-2: #4e83ea;
  --border: rgba(27, 48, 73, 0.16);
}

:root[data-theme="executive-azure"][data-mode="dark"] {
  --bg: #0a1423;
  --surface: #10203a;
  --surface-2: #163055;
  --text: #e8f1fd;
  --muted: #a8bad1;
  --accent: #6791f2;
  --accent-2: #89adff;
  --border: rgba(168, 186, 209, 0.28);
}

:root[data-theme="boardroom-slate"][data-mode="light"] {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #edf1f6;
  --text: #243448;
  --muted: #66788f;
  --accent: #3e6ea1;
  --accent-2: #5b87b8;
  --border: rgba(36, 52, 72, 0.15);
}

:root[data-theme="boardroom-slate"][data-mode="dark"] {
  --bg: #111821;
  --surface: #1a2533;
  --surface-2: #243447;
  --text: #eaf1fa;
  --muted: #aab9cb;
  --accent: #6d95bf;
  --accent-2: #8fb2d3;
  --border: rgba(170, 185, 203, 0.28);
}

:root[data-theme="professional-teal"][data-mode="light"] {
  --bg: #f7fbff;
  --surface: #ffffff;
  --surface-2: #edf6fb;
  --text: #17324a;
  --muted: #5c748b;
  --accent: #0f8fa1;
  --accent-2: #2fb3c9;
  --border: rgba(23, 50, 74, 0.16);
}

:root[data-theme="professional-teal"][data-mode="dark"] {
  --bg: #0a1a23;
  --surface: #102734;
  --surface-2: #16394a;
  --text: #e7f4fa;
  --muted: #a6c0cd;
  --accent: #39afc0;
  --accent-2: #63c9d8;
  --border: rgba(166, 192, 205, 0.28);
}

:root[data-theme="trust-indigo"][data-mode="light"] {
  --bg: #f5f7fc;
  --surface: #ffffff;
  --surface-2: #eceffd;
  --text: #202a44;
  --muted: #5d6785;
  --accent: #4158d8;
  --accent-2: #6a7ae8;
  --border: rgba(32, 42, 68, 0.15);
}

:root[data-theme="trust-indigo"][data-mode="dark"] {
  --bg: #0e1224;
  --surface: #161c36;
  --surface-2: #202a4a;
  --text: #edf1ff;
  --muted: #aeb8d8;
  --accent: #6e82ee;
  --accent-2: #93a3ff;
  --border: rgba(174, 184, 216, 0.28);
}

:root[data-theme="forest-ledger"][data-mode="light"] {
  --bg: #f4f8f6;
  --surface: #ffffff;
  --surface-2: #eaf2ee;
  --text: #1f3a33;
  --muted: #5d7c73;
  --accent: #1c8e68;
  --accent-2: #35a97f;
  --border: rgba(31, 58, 51, 0.15);
}

:root[data-theme="forest-ledger"][data-mode="dark"] {
  --bg: #0f1c1a;
  --surface: #162924;
  --surface-2: #1d3931;
  --text: #e8f5ef;
  --muted: #a8c5bb;
  --accent: #3cb68d;
  --accent-2: #60d3a7;
  --border: rgba(168, 197, 187, 0.27);
}

:root[data-theme="copper-insight"][data-mode="light"] {
  --bg: #fcf7f2;
  --surface: #ffffff;
  --surface-2: #f4ece4;
  --text: #3c312b;
  --muted: #7b6a60;
  --accent: #a85b3c;
  --accent-2: #c87452;
  --border: rgba(62, 46, 40, 0.16);
}

:root[data-theme="copper-insight"][data-mode="dark"] {
  --bg: #1c1714;
  --surface: #2a221d;
  --surface-2: #3a2c24;
  --text: #f7eee8;
  --muted: #c8b3a6;
  --accent: #d48562;
  --accent-2: #e6a07f;
  --border: rgba(200, 179, 166, 0.27);
}

:root[data-theme="graphite-cyan"][data-mode="light"] {
  --bg: #f3f7fa;
  --surface: #ffffff;
  --surface-2: #e9eff4;
  --text: #203543;
  --muted: #5f7787;
  --accent: #0d8fa8;
  --accent-2: #2eb0c6;
  --border: rgba(32, 53, 67, 0.15);
}

:root[data-theme="graphite-cyan"][data-mode="dark"] {
  --bg: #0e171d;
  --surface: #17242d;
  --surface-2: #1f3340;
  --text: #e6f3fa;
  --muted: #a4bbc9;
  --accent: #3ab8d1;
  --accent-2: #64cfe4;
  --border: rgba(164, 187, 201, 0.27);
}

:root[data-theme="sandstone-navy"][data-mode="light"] {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f1ece4;
  --text: #2b3447;
  --muted: #667085;
  --accent: #345a97;
  --accent-2: #4a76b5;
  --border: rgba(43, 52, 71, 0.15);
}

:root[data-theme="sandstone-navy"][data-mode="dark"] {
  --bg: #161920;
  --surface: #202632;
  --surface-2: #2b3647;
  --text: #ecf1f9;
  --muted: #aeb9cc;
  --accent: #6d8fcb;
  --accent-2: #90acde;
  --border: rgba(174, 185, 204, 0.27);
}

:root[data-theme="olive-authority"][data-mode="light"] {
  --bg: #f7f9f3;
  --surface: #ffffff;
  --surface-2: #edf1e4;
  --text: #323c2d;
  --muted: #6d7968;
  --accent: #5e7f2e;
  --accent-2: #789a46;
  --border: rgba(50, 60, 45, 0.15);
}

:root[data-theme="olive-authority"][data-mode="dark"] {
  --bg: #161c12;
  --surface: #232c1d;
  --surface-2: #303d28;
  --text: #eef4e6;
  --muted: #b2c0a7;
  --accent: #8dba53;
  --accent-2: #a9cf74;
  --border: rgba(178, 192, 167, 0.27);
}

:root[data-theme="ruby-corporate"][data-mode="light"] {
  --bg: #fbf6f7;
  --surface: #ffffff;
  --surface-2: #f3eaec;
  --text: #3d2d34;
  --muted: #7a6670;
  --accent: #a34763;
  --accent-2: #be5e7c;
  --border: rgba(61, 45, 52, 0.15);
}

:root[data-theme="ruby-corporate"][data-mode="dark"] {
  --bg: #1a1418;
  --surface: #271d24;
  --surface-2: #362632;
  --text: #f5ebef;
  --muted: #c3aeb7;
  --accent: #cc7090;
  --accent-2: #df90ac;
  --border: rgba(195, 174, 183, 0.27);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.themed-page {
  background: var(--bg);
  color: var(--text);
  transition: background-color 180ms ease, color 180ms ease;
}

.themed-page .site-header,
.themed-page .site-footer,
.themed-page .article-hero,
.themed-page .cta-section {
  border-color: var(--border) !important;
}

.themed-page .site-logo,
.themed-page .hero-title,
.themed-page .cta-title,
.themed-page .cta-price,
.themed-page .footer-copy,
.themed-page .text-white {
  color: var(--text) !important;
}

.themed-page .site-logo-accent,
.themed-page .text-brand-teal,
.themed-page .nav-blueprint {
  color: var(--accent) !important;
}

.themed-page .text-brand-cyan {
  color: var(--accent-2) !important;
}

.themed-page .site-badge,
.themed-page .hero-chip,
.themed-page .text-brand-slate {
  color: var(--muted) !important;
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
}

.themed-page .hero-subtitle,
.themed-page .hero-meta,
.themed-page .cta-description,
.themed-page .cta-currency,
.themed-page .cta-note,
.themed-page [class*="text-slate-"] {
  color: var(--muted) !important;
}

.themed-page [class*="border-slate-"] {
  border-color: var(--border) !important;
}

.themed-page [class*="bg-brand-darkBg"],
.themed-page [class*="bg-brand-navy"],
.themed-page [class*="bg-slate-900"],
.themed-page [class*="bg-slate-800"] {
  background-color: color-mix(in srgb, var(--surface) 78%, var(--surface-2)) !important;
}

.themed-page .cta-card {
  background: linear-gradient(165deg, var(--surface), var(--surface-2)) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}

.themed-page .cta-glow {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.themed-page .cta-button,
.themed-page .lemonsqueezy-button,
.themed-page .bg-brand-teal {
  background: var(--accent) !important;
  color: color-mix(in srgb, var(--surface) 12%, #000) !important;
}

.themed-page .cta-button:hover,
.themed-page .lemonsqueezy-button:hover,
.themed-page .hover\:bg-brand-cyan:hover {
  background: var(--accent-2) !important;
}

.theme-toggle-anchor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  will-change: transform;
}

.theme-toggle-anchor .theme-toggle {
  pointer-events: auto;
}

.theme-toggle {
  z-index: 1;
  min-width: 2rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.35rem;
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.9) 0 0.05rem, transparent 0.07rem),
    radial-gradient(circle at 70% 38%, rgba(173, 216, 255, 0.85) 0 0.045rem, transparent 0.065rem),
    radial-gradient(circle at 60% 68%, rgba(255, 255, 255, 0.75) 0 0.04rem, transparent 0.06rem),
    linear-gradient(145deg, #0b1e38 0%, #10264a 55%, #16325e 100%);
  color: #f3f8ff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(7, 16, 28, 0.28);
  padding: 0.2rem 0.45rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(7, 16, 28, 0.34);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0 0.055rem, transparent 0.075rem),
    radial-gradient(circle at 70% 40%, rgba(173, 216, 255, 0.9) 0 0.05rem, transparent 0.07rem),
    radial-gradient(circle at 58% 68%, rgba(255, 255, 255, 0.85) 0 0.045rem, transparent 0.065rem),
    linear-gradient(145deg, #0e2442 0%, #15315a 55%, #1d3f74 100%);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.95rem;
}

.theme-toggle-icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-mode="dark"] .theme-toggle {
  border-color: rgba(170, 229, 238, 0.88);
  background:
    radial-gradient(circle at 74% 32%, rgba(255, 214, 102, 0.95) 0 0.13rem, transparent 0.155rem),
    radial-gradient(circle at 36% 68%, rgba(178, 235, 242, 0.38) 0 0.2rem, transparent 0.24rem),
    linear-gradient(145deg, #e8fbff 0%, #d6f3f8 52%, #c7ebf1 100%);
  color: #f2b233;
  box-shadow: 0 6px 20px rgba(96, 152, 168, 0.25);
}

:root[data-mode="dark"] .theme-toggle:hover {
  background:
    radial-gradient(circle at 74% 32%, rgba(255, 220, 120, 0.98) 0 0.14rem, transparent 0.16rem),
    radial-gradient(circle at 34% 70%, rgba(191, 239, 245, 0.42) 0 0.22rem, transparent 0.26rem),
    linear-gradient(145deg, #f0fdff 0%, #e1f8fb 52%, #d3f1f6 100%);
  box-shadow: 0 8px 24px rgba(108, 165, 181, 0.27);
}