@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Syne:wght@400;500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&family=VT323&display=swap');

:root {
  /* Design System 2.0 Color Palette: Premium Technical Editorial */
  --bg-primary: #030712;
  --bg-surface: #0b0f19;
  --bg-card: #111827;
  --bg-card-hover: #1f2937;
  
  --accent-cyan: #38bdf8;
  --accent-indigo: #6366f1;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(56, 189, 248, 0.35);

  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px -5px rgba(56, 189, 248, 0.18);

  /* Extended Token Contract for Presentation Layer */
  --text-body: #e5e7eb;
  --text-heading: #ffffff;
  --text-link: var(--accent-cyan);
  --card-link: #ffffff;

  --bg-form: #0f172a;
  --bg-input: #1e293b;
  --border-input: #334155;
  --placeholder-color: #64748b;
  --focus-ring: var(--accent-cyan);
  --focus-ring-shadow: rgba(56, 189, 248, 0.25);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #030712;
  --btn-secondary-bg: var(--bg-surface);
  --btn-secondary-text: var(--text-secondary);

  --alert-success-bg: rgba(16, 185, 129, 0.15);
  --alert-success-border: #10b981;
  --alert-success-text: #34d399;
  --alert-error-bg: rgba(244, 63, 94, 0.15);
  --alert-error-border: #f43f5e;
  --alert-error-text: #fb7185;

  --tag-bg: rgba(56, 189, 248, 0.1);
  --tag-border: rgba(56, 189, 248, 0.25);
  --tag-text: var(--accent-cyan);

  --bg-card-empty: #0f172a;
  --border-card-empty: #1e293b;

  /* ==========================================================
     P5: Design System 2.0 — Shape, Motion & Reading Tokens
     These tokens control the 5 design language dimensions.
     Each theme overrides these in its [data-theme] block.
     ========================================================== */

  /* Shape Language */
  --theme-radius-card:    12px;   /* card border-radius */
  --theme-radius-btn:     8px;    /* button border-radius */
  --theme-radius-input:   6px;    /* input border-radius */
  --theme-radius-badge:   4px;    /* badge/tag border-radius */
  --theme-radius-pill:    9999px; /* pill badge border-radius */

  /* Shadow Language */
  --theme-shadow-card:    0 4px 24px -4px rgba(0,0,0,0.45);
  --theme-shadow-hover:   0 0 32px -4px rgba(56,189,248,0.22);

  /* Motion Language */
  --theme-transition:     all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition-fast: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);

  /* Reading Column */
  --theme-reading-width:  760px;

  /* Typography Scale */
  --theme-body-size:      1.08rem;
  --theme-body-line:      1.85;
  --theme-heading-spacing: -0.03em;
}

/* Utility Classes for Form, Input, Alert & Cards */
.form-container {
  background: var(--bg-form);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 2rem;
}
.form-label {
  display: block;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder {
  color: var(--placeholder-color);
}
.form-input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-ring-shadow);
}
textarea.form-input {
  resize: vertical;
}

.alert-success {
  background: var(--alert-success-bg);
  border: 1px solid var(--alert-success-border);
  color: var(--alert-success-text);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.alert-error {
  background: var(--alert-error-bg);
  border: 1px solid var(--alert-error-border);
  color: var(--alert-error-text);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.search-card {
  background: var(--bg-card-empty);
  border: 1px solid var(--border-card-empty);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.search-empty {
  background: var(--bg-card-empty);
  border: 1px solid var(--border-card-empty);
  border-radius: 10px;
  padding: 3rem;
  text-align: center;
  color: var(--text-secondary);
}

/* ============================================================
   THEME OVERRIDES: data-theme attribute on <html> element
   Themes ONLY change CSS Variables — NO router/slug/DB impact
   ============================================================ */

/* 1. dark_cyber = default: no overrides needed */

/* 2. win90_retro: Windows 95/98 Classic Desktop */
[data-theme="win90_retro"] {
  --bg-primary: #008080;
  --bg-surface: #c0c0c0;
  --bg-card: #d4d0c8;
  --bg-card-hover: #ece9d8;
  --accent-cyan: #000080;
  --accent-indigo: #800000;
  --accent-emerald: #008000;
  --accent-amber: #808000;
  --accent-rose: #800000;
  --text-primary: #000000;
  --text-secondary: #222222;
  --text-muted: #444444;
  --border-subtle: #888888;
  --border-hover: #000080;
  --font-heading: 'Courier New', 'MS Sans Serif', Tahoma, sans-serif;
  --font-body: Tahoma, 'MS Sans Serif', Arial, sans-serif;
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --shadow-subtle: 2px 2px 0px #888888;
  --shadow-glow: 2px 2px 0px #000080;

  --text-body: #000000;
  --text-heading: #000080;
  --text-link: #000080;
  --card-link: #000080;

  --bg-form: #c0c0c0;
  --bg-input: #ffffff;
  --border-input: #888888;
  --placeholder-color: #666666;
  --focus-ring: #000080;
  --focus-ring-shadow: rgba(0, 0, 128, 0.2);

  --btn-primary-bg: #c0c0c0;
  --btn-primary-text: #000000;
  --btn-secondary-bg: #d4d0c8;
  --btn-secondary-text: #000000;

  --alert-success-bg: #d4edd5;
  --alert-success-border: #008000;
  --alert-success-text: #004d00;
  --alert-error-bg: #f8d7da;
  --alert-error-border: #800000;
  --alert-error-text: #660000;

  --tag-bg: #000080;
  --tag-border: #000080;
  --tag-text: #ffffff;

  --bg-card-empty: #c0c0c0;
  --border-card-empty: #888888;
}

[data-theme="win90_retro"] body {
  background-color: #008080;
  color: #000000;
}

[data-theme="win90_retro"] .site-header {
  background: #c0c0c0;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #888888;
  backdrop-filter: none;
}

[data-theme="win90_retro"] .card,
[data-theme="win90_retro"] .field-block,
[data-theme="win90_retro"] .form-container {
  background: #c0c0c0;
  border: 2px solid #ffffff;
  border-right-color: #888888;
  border-bottom-color: #888888;
  box-shadow: 2px 2px 0px #000;
}

[data-theme="win90_retro"] .site-footer {
  background: #c0c0c0;
  border-top: 2px solid #888888;
}

[data-theme="win90_retro"] .form-input {
  background: #ffffff;
  border: 2px solid;
  border-color: #888888 #dfdfdf #dfdfdf #888888; /* Windows 95 inset bevel */
  color: #000000;
  border-radius: 0;
}

[data-theme="win90_retro"] .form-input:focus {
  outline: 1px dotted #000000;
  box-shadow: none;
  border-color: #888888 #dfdfdf #dfdfdf #888888;
}

[data-theme="win90_retro"] .btn-primary {
  background: #c0c0c0 !important;
  color: #000000 !important;
  border: 2px solid #ffffff;
  border-right-color: #000000;
  border-bottom-color: #000000;
  border-radius: 0;
  box-shadow: 1px 1px 0px #808080;
}

/* 3. editorial_minimal: Light Paper Editorial */
[data-theme="editorial_minimal"] {
  --bg-primary: #faf9f6;
  --bg-surface: #ffffff;
  --bg-card: #f5f5f0;
  --bg-card-hover: #ede8e0;
  --accent-cyan: #b45309;
  --accent-indigo: #7c3aed;
  --accent-emerald: #16a34a;
  --accent-amber: #d97706;
  --accent-rose: #dc2626;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #78716c;
  --border-subtle: rgba(0,0,0,0.1);
  --border-hover: rgba(180, 83, 9, 0.35);
  --font-heading: 'Outfit', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', Georgia, serif;
  --shadow-subtle: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-glow: 0 4px 16px rgba(180, 83, 9, 0.12);

  --text-body: #292524;
  --text-heading: #0c0a09;
  --text-link: #b45309;
  --card-link: #0c0a09;

  --bg-form: #ffffff;
  --bg-input: #f5f5f0;
  --border-input: #d6d3d1;
  --placeholder-color: #a8a29e;
  --focus-ring: #b45309;
  --focus-ring-shadow: rgba(180, 83, 9, 0.2);

  --btn-primary-bg: #1c1917;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #f5f5f0;
  --btn-secondary-text: #57534e;

  --alert-success-bg: #f0fdf4;
  --alert-success-border: #86efac;
  --alert-success-text: #166534;
  --alert-error-bg: #fef2f2;
  --alert-error-border: #fca5a5;
  --alert-error-text: #991b1b;

  --tag-bg: rgba(180, 83, 9, 0.1);
  --tag-border: rgba(180, 83, 9, 0.25);
  --tag-text: #b45309;

  --bg-card-empty: #ffffff;
  --border-card-empty: #e7e5e4;
}

[data-theme="editorial_minimal"] body {
  background-color: #faf9f6;
  color: #1c1917;
}

[data-theme="editorial_minimal"] .site-header {
  background: rgba(250, 249, 246, 0.95);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  backdrop-filter: blur(8px);
}

[data-theme="editorial_minimal"] .card,
[data-theme="editorial_minimal"] .field-block,
[data-theme="editorial_minimal"] .form-container {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}

[data-theme="editorial_minimal"] .site-footer {
  background: #f0ede6;
  border-top: 1px solid rgba(0,0,0,0.1);
}

[data-theme="editorial_minimal"] a:hover {
  color: #b45309;
}

[data-theme="editorial_minimal"] .btn-primary {
  background: #1c1917 !important;
  color: #ffffff !important;
}

/* 4. matrix_terminal: Hacker Green Terminal */
[data-theme="matrix_terminal"] {
  --bg-primary: #000000;
  --bg-surface: #050f05;
  --bg-card: #0a1a0a;
  --bg-card-hover: #0f250f;
  --accent-cyan: #4ade80;
  --accent-indigo: #22c55e;
  --accent-emerald: #16a34a;
  --accent-amber: #86efac;
  --accent-rose: #f87171;
  --text-primary: #22c55e;
  --text-secondary: #16a34a;
  --text-muted: #15803d;
  --border-subtle: rgba(34, 197, 94, 0.2);
  --border-hover: rgba(74, 222, 128, 0.5);
  --font-heading: 'JetBrains Mono', 'Courier New', monospace;
  --font-body: 'JetBrains Mono', 'Courier New', monospace;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --shadow-subtle: 0 0 15px rgba(34, 197, 94, 0.15);
  --shadow-glow: 0 0 30px rgba(74, 222, 128, 0.3);

  --text-body: #4ade80;
  --text-heading: #86efac;
  --text-link: #4ade80;
  --card-link: #4ade80;

  --bg-form: #050f05;
  --bg-input: #0a1a0a;
  --border-input: rgba(34, 197, 94, 0.3);
  --placeholder-color: #15803d;
  --focus-ring: #4ade80;
  --focus-ring-shadow: rgba(74, 222, 128, 0.3);

  --btn-primary-bg: #22c55e;
  --btn-primary-text: #000000;
  --btn-secondary-bg: #0a1a0a;
  --btn-secondary-text: #22c55e;

  --alert-success-bg: rgba(34, 197, 94, 0.15);
  --alert-success-border: #22c55e;
  --alert-success-text: #86efac;
  --alert-error-bg: rgba(248, 113, 113, 0.15);
  --alert-error-border: #f87171;
  --alert-error-text: #fca5a5;

  --tag-bg: rgba(34, 197, 94, 0.15);
  --tag-border: rgba(34, 197, 94, 0.3);
  --tag-text: #4ade80;

  --bg-card-empty: #050f05;
  --border-card-empty: rgba(34, 197, 94, 0.3);
}

[data-theme="matrix_terminal"] body {
  background-color: #000000;
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

[data-theme="matrix_terminal"] .site-header {
  background: rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
  backdrop-filter: none;
}

[data-theme="matrix_terminal"] .card,
[data-theme="matrix_terminal"] .field-block,
[data-theme="matrix_terminal"] .form-container {
  background: #050f05;
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.1);
}

[data-theme="matrix_terminal"] .site-footer {
  background: #000000;
  border-top: 1px solid rgba(34, 197, 94, 0.2);
}

[data-theme="matrix_terminal"] a:hover {
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

[data-theme="matrix_terminal"] .hero-title .accent-text {
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
}

[data-theme="matrix_terminal"] .btn-primary {
  background: #22c55e !important;
  color: #000000 !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

/* 5. ocean_pro: Corporate Ocean Blue */
[data-theme="ocean_pro"] {
  --bg-primary: #061826;
  --bg-surface: #0b2238;
  --bg-card: #102a43;
  --bg-card-hover: #183757;
  --accent-cyan: #38bdf8;
  --accent-indigo: #60a5fa;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #f87171;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-subtle: rgba(56, 189, 248, 0.15);
  --border-hover: rgba(56, 189, 248, 0.4);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 25px rgba(2, 132, 199, 0.25);

  --text-body: #cbd5e1;
  --text-heading: #ffffff;
  --text-link: #38bdf8;
  --card-link: #ffffff;

  --bg-form: #0b2238;
  --bg-input: #102a43;
  --border-input: #244a70;
  --placeholder-color: #64748b;
  --focus-ring: #0284c7;
  --focus-ring-shadow: rgba(2, 132, 199, 0.3);

  --btn-primary-bg: #0284c7;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #102a43;
  --btn-secondary-text: #94a3b8;

  --alert-success-bg: rgba(52, 211, 153, 0.15);
  --alert-success-border: #34d399;
  --alert-success-text: #6ee7b7;
  --alert-error-bg: rgba(248, 113, 113, 0.15);
  --alert-error-border: #f87171;
  --alert-error-text: #fca5a5;

  --tag-bg: rgba(2, 132, 199, 0.2);
  --tag-border: rgba(56, 189, 248, 0.3);
  --tag-text: #38bdf8;

  --bg-card-empty: #0b2238;
  --border-card-empty: #183757;
}

[data-theme="ocean_pro"] body {
  background-color: #061826;
  color: #f1f5f9;
}

[data-theme="ocean_pro"] .btn-primary {
  background: #0284c7 !important;
  color: #ffffff !important;
}

/* 6. warm_paper: Warm Cream Paper */
[data-theme="warm_paper"] {
  --bg-primary: #fbf7ee;
  --bg-surface: #f5ead0;
  --bg-card: #eee0c0;
  --bg-card-hover: #e5d3ab;
  --accent-cyan: #8b5e3c;
  --accent-indigo: #7c2d12;
  --accent-emerald: #2d6a4f;
  --accent-amber: #b45309;
  --accent-rose: #991b1b;
  --text-primary: #2c1d11;
  --text-secondary: #5c4434;
  --text-muted: #8c6d58;
  --border-subtle: rgba(139, 94, 60, 0.18);
  --border-hover: rgba(139, 94, 60, 0.45);
  --font-heading: Georgia, 'Outfit', serif;
  --font-body: Georgia, 'Inter', serif;
  --font-mono: 'Courier New', monospace;
  --shadow-subtle: 0 2px 10px rgba(60, 30, 10, 0.08);
  --shadow-glow: 0 4px 20px rgba(139, 94, 60, 0.15);

  --text-body: #3d2b1f;
  --text-heading: #1c1008;
  --text-link: #8b5e3c;
  --card-link: #1c1008;

  --bg-form: #f5ead0;
  --bg-input: #fbf7ee;
  --border-input: #d8c4a0;
  --placeholder-color: #9c7d65;
  --focus-ring: #8b5e3c;
  --focus-ring-shadow: rgba(139, 94, 60, 0.2);

  --btn-primary-bg: #5c3a21;
  --btn-primary-text: #fbf7ee;
  --btn-secondary-bg: #eee0c0;
  --btn-secondary-text: #5c4434;

  --alert-success-bg: #e8f5e9;
  --alert-success-border: #2d6a4f;
  --alert-success-text: #1b4332;
  --alert-error-bg: #ffebee;
  --alert-error-border: #991b1b;
  --alert-error-text: #5c0a0a;

  --tag-bg: rgba(139, 94, 60, 0.12);
  --tag-border: rgba(139, 94, 60, 0.3);
  --tag-text: #7c2d12;

  --bg-card-empty: #f5ead0;
  --border-card-empty: #d8c4a0;
}

[data-theme="warm_paper"] body {
  background-color: #fbf7ee;
  color: #2c1d11;
}

[data-theme="warm_paper"] .site-header {
  background: rgba(251, 247, 238, 0.95);
  border-bottom: 1px solid rgba(139, 94, 60, 0.18);
  backdrop-filter: blur(8px);
}

[data-theme="warm_paper"] .site-footer {
  background: #f5ead0;
  border-top: 1px solid rgba(139, 94, 60, 0.18);
}

[data-theme="warm_paper"] .btn-primary {
  background: #5c3a21 !important;
  color: #fbf7ee !important;
}

/* 7. forest_natural: Deep Natural Forest */
[data-theme="forest_natural"] {
  --bg-primary: #0a170d;
  --bg-surface: #112a18;
  --bg-card: #183c23;
  --bg-card-hover: #214f2f;
  --accent-cyan: #34d399;
  --accent-indigo: #10b981;
  --accent-emerald: #059669;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --text-primary: #f0fdf4;
  --text-secondary: #a7f3d0;
  --text-muted: #6ee7b7;
  --border-subtle: rgba(52, 211, 153, 0.15);
  --border-hover: rgba(52, 211, 153, 0.4);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 25px rgba(52, 211, 153, 0.2);

  --text-body: #d1fae5;
  --text-heading: #ffffff;
  --text-link: #34d399;
  --card-link: #ffffff;

  --bg-form: #112a18;
  --bg-input: #183c23;
  --border-input: #2d6a3f;
  --placeholder-color: #6ee7b7;
  --focus-ring: #10b981;
  --focus-ring-shadow: rgba(16, 185, 129, 0.25);

  --btn-primary-bg: #10b981;
  --btn-primary-text: #042f1a;
  --btn-secondary-bg: #183c23;
  --btn-secondary-text: #a7f3d0;

  --alert-success-bg: rgba(16, 185, 129, 0.2);
  --alert-success-border: #34d399;
  --alert-success-text: #a7f3d0;
  --alert-error-bg: rgba(244, 63, 94, 0.2);
  --alert-error-border: #f43f5e;
  --alert-error-text: #fecdd3;

  --tag-bg: rgba(16, 185, 129, 0.2);
  --tag-border: rgba(52, 211, 153, 0.35);
  --tag-text: #34d399;

  --bg-card-empty: #112a18;
  --border-card-empty: #2d6a3f;
}

[data-theme="forest_natural"] body {
  background-color: #0a170d;
  color: #f0fdf4;
}

[data-theme="forest_natural"] .btn-primary {
  background: #10b981 !important;
  color: #042f1a !important;
}

/* 8. royal_premium: Luxurious Dark Purple/Gold */
[data-theme="royal_premium"] {
  --bg-primary: #0f0a1c;
  --bg-surface: #19122d;
  --bg-card: #231a3e;
  --bg-card-hover: #2f2352;
  --accent-cyan: #a78bfa;
  --accent-indigo: #818cf8;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #f43f5e;
  --text-primary: #f5f3ff;
  --text-secondary: #ddd6fe;
  --text-muted: #a78bfa;
  --border-subtle: rgba(167, 139, 250, 0.18);
  --border-hover: rgba(167, 139, 250, 0.45);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(167, 139, 250, 0.25);

  --text-body: #ede9fe;
  --text-heading: #ffffff;
  --text-link: #c084fc;
  --card-link: #ffffff;

  --bg-form: #19122d;
  --bg-input: #231a3e;
  --border-input: #3b2c66;
  --placeholder-color: #8b5cf6;
  --focus-ring: #a78bfa;
  --focus-ring-shadow: rgba(167, 139, 250, 0.3);

  --btn-primary-bg: #8b5cf6;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #231a3e;
  --btn-secondary-text: #ddd6fe;

  --alert-success-bg: rgba(52, 211, 153, 0.18);
  --alert-success-border: #34d399;
  --alert-success-text: #a7f3d0;
  --alert-error-bg: rgba(244, 63, 94, 0.18);
  --alert-error-border: #f43f5e;
  --alert-error-text: #fecdd3;

  --tag-bg: rgba(167, 139, 250, 0.2);
  --tag-border: rgba(167, 139, 250, 0.35);
  --tag-text: #c084fc;

  --bg-card-empty: #19122d;
  --border-card-empty: #3b2c66;
}

[data-theme="royal_premium"] body {
  background-color: #0f0a1c;
  color: #f5f3ff;
}

[data-theme="royal_premium"] .btn-primary {
  background: #8b5cf6 !important;
  color: #ffffff !important;
}

/* 9. sunset_modern: Modern Dark Orange/Coral */
[data-theme="sunset_modern"] {
  --bg-primary: #180c06;
  --bg-surface: #26150b;
  --bg-card: #351f12;
  --bg-card-hover: #472b1a;
  --accent-cyan: #f97316;
  --accent-indigo: #fb923c;
  --accent-emerald: #34d399;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --text-primary: #fff7ed;
  --text-secondary: #ffedd5;
  --text-muted: #fdba74;
  --border-subtle: rgba(249, 115, 22, 0.18);
  --border-hover: rgba(249, 115, 22, 0.45);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(249, 115, 22, 0.25);

  --text-body: #fed7aa;
  --text-heading: #ffffff;
  --text-link: #f97316;
  --card-link: #ffffff;

  --bg-form: #26150b;
  --bg-input: #351f12;
  --border-input: #54321d;
  --placeholder-color: #c2410c;
  --focus-ring: #f97316;
  --focus-ring-shadow: rgba(249, 115, 22, 0.3);

  --btn-primary-bg: #ea580c;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #351f12;
  --btn-secondary-text: #ffedd5;

  --alert-success-bg: rgba(52, 211, 153, 0.18);
  --alert-success-border: #34d399;
  --alert-success-text: #a7f3d0;
  --alert-error-bg: rgba(244, 63, 94, 0.18);
  --alert-error-border: #f43f5e;
  --alert-error-text: #fecdd3;

  --tag-bg: rgba(249, 115, 22, 0.2);
  --tag-border: rgba(249, 115, 22, 0.35);
  --tag-text: #fb923c;

  --bg-card-empty: #26150b;
  --border-card-empty: #54321d;
}

[data-theme="sunset_modern"] body {
  background-color: #180c06;
  color: #fff7ed;
}

[data-theme="sunset_modern"] .btn-primary {
  background: #ea580c !important;
  color: #ffffff !important;
}

/* 10. mono_studio: Minimal Stark Monochrome */
[data-theme="mono_studio"] {
  --bg-primary: #111111;
  --bg-surface: #1a1a1a;
  --bg-card: #262626;
  --bg-card-hover: #333333;
  --accent-cyan: #ffffff;
  --accent-indigo: #d4d4d4;
  --accent-emerald: #a3a3a3;
  --accent-amber: #737373;
  --accent-rose: #525252;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --border-subtle: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 255, 255, 0.4);
  --font-heading: 'Outfit', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.15);

  --text-body: #e5e5e5;
  --text-heading: #ffffff;
  --text-link: #ffffff;
  --card-link: #ffffff;

  --bg-form: #1a1a1a;
  --bg-input: #262626;
  --border-input: #404040;
  --placeholder-color: #737373;
  --focus-ring: #ffffff;
  --focus-ring-shadow: rgba(255, 255, 255, 0.25);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #111111;
  --btn-secondary-bg: #262626;
  --btn-secondary-text: #a3a3a3;

  --alert-success-bg: rgba(255, 255, 255, 0.1);
  --alert-success-border: #ffffff;
  --alert-success-text: #ffffff;
  --alert-error-bg: rgba(255, 255, 255, 0.15);
  --alert-error-border: #a3a3a3;
  --alert-error-text: #ffffff;

  --tag-bg: rgba(255, 255, 255, 0.12);
  --tag-border: rgba(255, 255, 255, 0.3);
  --tag-text: #ffffff;

  --bg-card-empty: #1a1a1a;
  --border-card-empty: #404040;
}

[data-theme="mono_studio"] body {
  background-color: #111111;
  color: #ffffff;
}

[data-theme="mono_studio"] .btn-primary {
  background: #ffffff !important;
  color: #111111 !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Reading Progress Indicator */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-indigo));
  z-index: 2000;
  transition: width 0.1s linear;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.mono {
  font-family: var(--font-mono);
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

a:hover {
  color: var(--accent-cyan);
}

/* Base Wrapper */
.main-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  flex: 1;
  width: 100%;
}

/* Site Header & Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.02em;
}

.brand-logo-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent-cyan);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  padding: 0.4rem 0;
}

.nav-link:hover, .nav-link.active {
  color: #ffffff;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: #ffffff;
  font-size: 1.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}

/* Technical Hero Section */
.hero-technical {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 4.5rem;
  padding-top: 1.5rem;
}

@media (min-width: 992px) {
  .hero-technical {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
  }
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-cyan);
  margin-bottom: 1.5rem;
}

.hero-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 10px var(--accent-emerald);
}

.hero-title {
  font-size: 3.2rem;
  line-height: 1.12;
  margin-bottom: 1.25rem;
  letter-spacing: -0.04em;
}

.hero-title .accent-text {
  color: var(--accent-cyan);
}

.hero-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 620px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Buttons */
.btn-primary {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--btn-primary-bg, #ffffff);
  color: var(--btn-primary-text, #030712) !important;
  padding: 0.8rem 1.6rem;
  border-radius: var(--theme-radius-btn);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--theme-transition);
}

.btn-primary:hover {
  background: var(--accent-cyan);
  color: #030712 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary) !important;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
}

/* Editorial Field Section ("THE FIELD") */
.field-block {
  margin-top: 1rem;
  padding: 2.25rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  font-family: var(--font-body);
}

.field-header {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.field-tagline {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
  max-width: 540px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 2rem;
}

.field-item {
  display: flex;
  flex-direction: column;
}

.field-item-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 0.35rem;
}

.field-item-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.field-item-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Editorial Story Flow Navigation & Next Story Block */
.next-story-wrapper {
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--border-subtle);
}

.next-story-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.next-story-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 2.75rem 2.25rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.next-story-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.next-story-title {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
  transition: color 0.2s ease;
}

.next-story-card:hover .next-story-title {
  color: var(--accent-cyan);
}

.next-story-excerpt {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 680px;
}

.next-story-cta {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.next-story-card:hover .next-story-cta {
  color: var(--accent-cyan);
}

.article-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.article-bottom-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.article-bottom-nav a:hover {
  color: var(--accent-cyan);
}


/* Article Card Grid */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--theme-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--theme-transition);
  box-shadow: var(--theme-shadow-card);
}

.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--theme-shadow-hover);
}

.card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.85rem;
}

.card-title {
  font-size: 1.2rem;
  line-height: 1.35;
  margin-bottom: 0.65rem;
}

.card-excerpt {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  flex: 1;
}

.card-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}

/* Article Detail Page Layout — Reading Column uses token */
.article-reading-column {
  max-width: var(--theme-reading-width, 760px);
  margin: 0 auto;
}

.article-header {
  margin-bottom: 2rem;
}

.article-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.03em;
}

.article-meta-bar {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
}

.article-content {
  font-size: var(--theme-body-size, 1.08rem);
  line-height: var(--theme-body-line, 1.85);
  color: var(--text-body, #e5e7eb);
}

.article-content p {
  margin-bottom: 1.5rem;
  line-height: 1.85;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: var(--text-heading, #ffffff);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--theme-heading-spacing, -0.03em);
}

.article-content h1 {
  font-size: 2.2rem;
  margin: 2.5rem 0 1.25rem 0;
}

.article-content h2 {
  font-size: 1.75rem;
  margin: 2.5rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.article-content h3 {
  font-size: 1.35rem;
  margin: 2rem 0 0.85rem 0;
}

.article-content h4 {
  font-size: 1.15rem;
  margin: 1.75rem 0 0.75rem 0;
}

.article-content strong,
.article-content b {
  font-weight: 700;
  color: var(--text-heading, #ffffff);
}

.article-content em,
.article-content i {
  font-style: italic;
}

.article-content a {
  color: var(--text-link, var(--accent-cyan));
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.article-content a:hover {
  opacity: 0.85;
}

.article-content ul,
.article-content ol {
  margin: 1.25rem 0 1.5rem 1.5rem;
  padding-left: 1rem;
}

.article-content ul {
  list-style-type: disc;
}

.article-content ol {
  list-style-type: decimal;
}

.article-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.article-content blockquote {
  border-left: 3px solid var(--accent-cyan);
  background: var(--bg-surface);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-primary, #f3f4f6);
}

.article-content blockquote p {
  margin-bottom: 0;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.75rem 0;
  display: block;
  box-shadow: var(--shadow-subtle);
}

.article-content pre {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin: 1.75rem 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.95rem;
}

.article-content th,
.article-content td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.article-content th {
  background: var(--bg-surface);
  font-weight: 700;
  color: var(--text-heading);
}

/* Callout Box */
.callout-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-cyan);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  font-size: 0.95rem;
}

/* Author Card */
.author-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 3rem 0;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-cyan);
  font-size: 1.2rem;
}

/* 3-Column Footer Layout */
.site-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 3.5rem 0 1.5rem 0;
  margin-top: 5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}


.footer-brand-logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.footer-bio {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 380px;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #ffffff;
  margin-bottom: 1.2rem;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links-list a {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.footer-links-list a:hover {
  color: var(--accent-cyan);
}

.footer-contact-info {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}

.footer-cta-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  color: var(--accent-cyan) !important;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
}

.footer-cta-btn:hover {
  background: var(--accent-cyan);
  color: #030712 !important;
}

.footer-bottom-bar {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
}

/* Empty State Box */
.empty-state-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--text-secondary);
}

/* Mobile Media Queries */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .nav-menu.active {
    display: flex;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .article-title {
    font-size: 1.9rem;
  }

  .article-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   P5: DESIGN SYSTEM 2.0 — PER-THEME LANGUAGE OVERRIDES
   Each theme has a distinct visual identity across 5 layers:
   1. Typography (font, size, weight, spacing)
   2. Shape (border-radius, shadows)
   3. Layout density (reading width, spacing)
   4. Component language (card, nav, btn, badge, blockquote)
   5. Motion (transitions, hover effects)
   ============================================================ */

/* ——————————————————————————————————————————————————————————
   1. DARK_CYBER: Default — Polish & Glow Improvements
   Tech observatory with neon cyan accents, smooth glows
   —————————————————————————————————————————————————————————— */
[data-theme="dark_cyber"] {
  --theme-radius-card:    12px;
  --theme-radius-btn:     8px;
  --theme-radius-input:   6px;
  --theme-radius-badge:   4px;
  --theme-shadow-card:    0 4px 24px -4px rgba(0,0,0,0.6);
  --theme-shadow-hover:   0 0 40px -4px rgba(56,189,248,0.25), 0 8px 30px -4px rgba(0,0,0,0.5);
  --theme-transition:     all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-reading-width:  760px;
  --theme-body-size:      1.08rem;
  --theme-body-line:      1.85;
  --theme-heading-spacing: -0.04em;
}

[data-theme="dark_cyber"] .article-content blockquote {
  border-left: 3px solid var(--accent-cyan);
  background: rgba(56,189,248,0.06);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  font-style: italic;
  position: relative;
}

[data-theme="dark_cyber"] .article-content blockquote::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent-cyan);
  opacity: 0.3;
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-family: Georgia, serif;
  line-height: 1;
}

[data-theme="dark_cyber"] .nav-link.active::after {
  box-shadow: 0 0 8px var(--accent-cyan);
}

[data-theme="dark_cyber"] .card-badge {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.3);
  box-shadow: 0 0 8px rgba(56,189,248,0.12);
}

/* ——————————————————————————————————————————————————————————
   2. WIN90_RETRO: Windows 95 — Full Bevel Component System
   Square, compact, bevel everything, instant transitions
   —————————————————————————————————————————————————————————— */
[data-theme="win90_retro"] {
  --theme-radius-card:    0px;
  --theme-radius-btn:     0px;
  --theme-radius-input:   0px;
  --theme-radius-badge:   0px;
  --theme-shadow-card:    2px 2px 0px #808080, inset 1px 1px 0px #ffffff, inset -1px -1px 0px #808080;
  --theme-shadow-hover:   3px 3px 0px #808080, inset 1px 1px 0px #ffffff, inset -1px -1px 0px #404040;
  --theme-transition:     none;
  --theme-transition-fast: none;
  --theme-reading-width:  800px;
  --theme-body-size:      1rem;
  --theme-body-line:      1.65;
  --theme-heading-spacing: 0em;
  --font-heading: 'VT323', 'Courier New', 'MS Sans Serif', Tahoma, sans-serif;
}

[data-theme="win90_retro"] .card:hover {
  transform: none;
  box-shadow: 3px 3px 0px #808080, inset 1px 1px 0px #ffffff, inset -1px -1px 0px #404040;
}

[data-theme="win90_retro"] .btn-primary {
  border: 2px solid #ffffff !important;
  border-right-color: #000000 !important;
  border-bottom-color: #000000 !important;
  outline: 1px solid #808080;
  font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif !important;
  font-size: 0.88rem !important;
  letter-spacing: 0;
}

[data-theme="win90_retro"] .btn-primary:hover {
  transform: none;
  border: 2px solid #808080 !important;
  border-right-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  box-shadow: none !important;
  background: #d4d0c8 !important;
}

[data-theme="win90_retro"] .btn-secondary {
  border: 2px solid #ffffff;
  border-right-color: #000000;
  border-bottom-color: #000000;
  border-radius: 0;
}

[data-theme="win90_retro"] .hero-pill {
  border-radius: 0;
  background: #000080;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 0.95rem;
}

[data-theme="win90_retro"] .nav-link.active::after {
  background: #000080;
  border-radius: 0;
}

[data-theme="win90_retro"] .card-badge {
  background: #000080;
  border-color: #000080;
  color: #ffffff;
  border-radius: 0;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 0.85rem;
}

/* Article content: Windows help-file style */
[data-theme="win90_retro"] .article-content blockquote {
  border-left: 4px solid #000080;
  background: #d4d0c8;
  border-radius: 0;
  padding: 0.75rem 1rem;
  font-style: normal;
  color: #000000;
  border: 2px solid #888888;
  border-left: 4px solid #000080;
}

[data-theme="win90_retro"] .article-content h2 {
  border-bottom: 2px solid #000080;
  padding-bottom: 0.25rem;
  font-family: 'VT323', 'Courier New', Tahoma, sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

[data-theme="win90_retro"] .article-content h3 {
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 1.1rem;
  color: #000080;
}

[data-theme="win90_retro"] .article-content pre {
  border-radius: 0;
  border: 2px solid #888888;
  border-right-color: #dfdfdf;
  border-bottom-color: #dfdfdf;
  background: #000000;
  color: #c0c0c0;
}

[data-theme="win90_retro"] .article-title {
  font-family: 'VT323', 'Courier New', Tahoma, sans-serif;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
  color: #000080;
}

/* ——————————————————————————————————————————————————————————
   3. EDITORIAL_MINIMAL: Crisp Paper Publication
   Serif fonts, flat cards, narrow column, pull-quote style
   —————————————————————————————————————————————————————————— */
[data-theme="editorial_minimal"] {
  --theme-radius-card:    2px;
  --theme-radius-btn:     2px;
  --theme-radius-input:   2px;
  --theme-radius-badge:   2px;
  --theme-shadow-card:    0 1px 4px rgba(0,0,0,0.08);
  --theme-shadow-hover:   0 4px 16px rgba(0,0,0,0.12);
  --theme-transition:     all 0.2s ease;
  --theme-reading-width:  680px;
  --theme-body-size:      1.1rem;
  --theme-body-line:      1.9;
  --theme-heading-spacing: -0.01em;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
}

[data-theme="editorial_minimal"] .card {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
  box-shadow: none;
}

[data-theme="editorial_minimal"] .card:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: #b45309;
}

[data-theme="editorial_minimal"] .card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-style: italic;
  font-size: 1.25rem;
}

[data-theme="editorial_minimal"] .card-badge {
  border-radius: 2px;
  font-family: 'Inter', 'Lora', serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

[data-theme="editorial_minimal"] .hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
}

[data-theme="editorial_minimal"] .article-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem;
  line-height: 1.15;
}

[data-theme="editorial_minimal"] .article-content h1,
[data-theme="editorial_minimal"] .article-content h2,
[data-theme="editorial_minimal"] .article-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
}

[data-theme="editorial_minimal"] .article-content h2 {
  border-bottom: none;
  border-top: 1px solid rgba(0,0,0,0.12);
  padding-top: 1.5rem;
  padding-bottom: 0;
  font-size: 1.65rem;
  font-style: italic;
}

[data-theme="editorial_minimal"] .article-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  font-style: italic;
  color: #b45309;
}

/* Pull-quote blockquote */
[data-theme="editorial_minimal"] .article-content blockquote {
  border-left: none;
  border-top: 2px solid #b45309;
  border-bottom: 2px solid #b45309;
  background: transparent;
  padding: 1.5rem 2rem;
  margin: 2.5rem -2rem;
  font-style: italic;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #5c3a08;
  border-radius: 0;
  text-align: center;
}

[data-theme="editorial_minimal"] .article-content blockquote p {
  margin-bottom: 0;
}

[data-theme="editorial_minimal"] .nav-link.active::after {
  background: #b45309;
  border-radius: 0;
  height: 1px;
}

/* ——————————————————————————————————————————————————————————
   4. MATRIX_TERMINAL: Hacker Green Terminal
   Monospace everything, 0px radius, glow, step-end motion
   —————————————————————————————————————————————————————————— */
[data-theme="matrix_terminal"] {
  --theme-radius-card:    0px;
  --theme-radius-btn:     0px;
  --theme-radius-input:   0px;
  --theme-radius-badge:   0px;
  --theme-shadow-card:    0 0 12px rgba(34,197,94,0.15), inset 0 0 0 1px rgba(34,197,94,0.1);
  --theme-shadow-hover:   0 0 30px rgba(74,222,128,0.35), 0 0 60px rgba(34,197,94,0.12);
  --theme-transition:     all 0.1s steps(1, end);
  --theme-transition-fast: all 0.05s steps(1, end);
  --theme-reading-width:  760px;
  --theme-body-size:      0.95rem;
  --theme-body-line:      1.7;
  --theme-heading-spacing: 0.06em;
}

[data-theme="matrix_terminal"] .card-badge {
  border-radius: 0;
  font-size: 0.78rem;
  border-color: rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.1);
}

[data-theme="matrix_terminal"] .hero-title {
  text-shadow: 0 0 20px rgba(74,222,128,0.5);
  letter-spacing: 0.05em;
}

[data-theme="matrix_terminal"] .article-title {
  font-family: 'JetBrains Mono', monospace;
  text-shadow: 0 0 15px rgba(74,222,128,0.5);
  letter-spacing: 0.04em;
}

[data-theme="matrix_terminal"] .article-content h2 {
  border-bottom: 1px solid rgba(34,197,94,0.3);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

[data-theme="matrix_terminal"] .article-content h2::before {
  content: '## ';
  color: rgba(74,222,128,0.5);
}

[data-theme="matrix_terminal"] .article-content h3::before {
  content: '> ';
  color: rgba(74,222,128,0.5);
}

/* Terminal prompt blockquote */
[data-theme="matrix_terminal"] .article-content blockquote {
  border-left: none;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  font-style: normal;
  color: #86efac;
  position: relative;
}

[data-theme="matrix_terminal"] .article-content blockquote::before {
  content: '$ ';
  color: #4ade80;
  font-weight: 700;
}

[data-theme="matrix_terminal"] .nav-link.active::after {
  background: #4ade80;
  border-radius: 0;
  box-shadow: 0 0 8px #4ade80;
}

[data-theme="matrix_terminal"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(34,197,94,0.6) !important;
  transform: none;
}

/* ——————————————————————————————————————————————————————————
   5. OCEAN_PRO: Corporate Ocean Blue
   Clean SaaS interface, structured, professional
   —————————————————————————————————————————————————————————— */
[data-theme="ocean_pro"] {
  --theme-radius-card:    10px;
  --theme-radius-btn:     8px;
  --theme-radius-input:   6px;
  --theme-radius-badge:   4px;
  --theme-shadow-card:    0 4px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(56,189,248,0.06);
  --theme-shadow-hover:   0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(2,132,199,0.2);
  --theme-transition:     all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-reading-width:  760px;
  --theme-body-size:      1.05rem;
  --theme-body-line:      1.8;
  --theme-heading-spacing: -0.03em;
}

[data-theme="ocean_pro"] .article-content blockquote {
  border-left: 3px solid #0284c7;
  background: rgba(2,132,199,0.08);
  border-radius: 0 6px 6px 0;
}

[data-theme="ocean_pro"] .article-content h2 {
  border-bottom: 1px solid rgba(56,189,248,0.2);
}

/* ——————————————————————————————————————————————————————————
   6. WARM_PAPER: Vintage Cream Paper
   Lora serif, paper texture shadow, comfortable 720px reading
   —————————————————————————————————————————————————————————— */
[data-theme="warm_paper"] {
  --theme-radius-card:    4px;
  --theme-radius-btn:     4px;
  --theme-radius-input:   4px;
  --theme-radius-badge:   2px;
  --theme-shadow-card:    0 2px 8px rgba(60,30,10,0.08), 0 0 0 1px rgba(139,94,60,0.08);
  --theme-shadow-hover:   0 6px 20px rgba(60,30,10,0.15), 0 0 0 1px rgba(139,94,60,0.18);
  --theme-transition:     all 0.25s ease;
  --theme-reading-width:  720px;
  --theme-body-size:      1.12rem;
  --theme-body-line:      1.88;
  --theme-heading-spacing: -0.015em;
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
}

[data-theme="warm_paper"] .card {
  box-shadow: 1px 1px 4px rgba(60,30,10,0.06), 0 0 0 1px rgba(139,94,60,0.08);
}

[data-theme="warm_paper"] .card:hover {
  box-shadow: 2px 4px 16px rgba(60,30,10,0.14), 0 0 0 1px rgba(139,94,60,0.2);
}

[data-theme="warm_paper"] .card-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
}

[data-theme="warm_paper"] .hero-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-style: italic;
}

[data-theme="warm_paper"] .article-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.4rem;
}

[data-theme="warm_paper"] .article-content h1,
[data-theme="warm_paper"] .article-content h2,
[data-theme="warm_paper"] .article-content h3 {
  font-family: 'Lora', Georgia, serif;
}

[data-theme="warm_paper"] .article-content h2 {
  border-bottom: 1px solid rgba(139,94,60,0.2);
  font-style: italic;
}

[data-theme="warm_paper"] .article-content h3 {
  font-weight: 700;
  color: #5c3a21;
}

/* Ink-border blockquote */
[data-theme="warm_paper"] .article-content blockquote {
  border-left: 4px solid #8b5e3c;
  background: #f5ead0;
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  font-style: italic;
  color: #5c4434;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.12rem;
}

[data-theme="warm_paper"] .nav-link.active::after {
  background: #8b5e3c;
  border-radius: 0;
}

[data-theme="warm_paper"] .card-badge {
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  background: rgba(139,94,60,0.1);
  border-color: rgba(139,94,60,0.25);
  color: #7c2d12;
}

/* ——————————————————————————————————————————————————————————
   7. FOREST_NATURAL: Deep Forest Night
   Nunito rounded, 16px cards, organic, breathable
   —————————————————————————————————————————————————————————— */
[data-theme="forest_natural"] {
  --theme-radius-card:    16px;
  --theme-radius-btn:     12px;
  --theme-radius-input:   8px;
  --theme-radius-badge:   9999px;
  --theme-shadow-card:    0 4px 24px rgba(0,0,0,0.5);
  --theme-shadow-hover:   0 8px 32px rgba(0,0,0,0.55), 0 0 24px rgba(52,211,153,0.2);
  --theme-transition:     all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --theme-reading-width:  760px;
  --theme-body-size:      1.06rem;
  --theme-body-line:      1.82;
  --theme-heading-spacing: -0.02em;
  --font-heading: 'Nunito', 'Inter', sans-serif;
  --font-body: 'DM Sans', 'Inter', sans-serif;
}

[data-theme="forest_natural"] .card-badge {
  border-radius: 9999px;
  padding: 0.2rem 0.75rem;
}

[data-theme="forest_natural"] .hero-pill {
  border-radius: 9999px;
}

[data-theme="forest_natural"] .article-content blockquote {
  border-left: 3px solid #34d399;
  background: rgba(16,185,129,0.08);
  border-radius: 0 16px 16px 0;
  padding: 1.25rem 1.5rem;
}

[data-theme="forest_natural"] .article-content h2 {
  border-bottom: 1px solid rgba(52,211,153,0.2);
}

[data-theme="forest_natural"] .article-content h3 {
  color: #34d399;
}

[data-theme="forest_natural"] .card:hover {
  transform: translateY(-4px) scale(1.01);
}

/* ——————————————————————————————————————————————————————————
   8. ROYAL_PREMIUM: Luxurious Dark Purple/Gold
   Cormorant serif headings, 20px soft radius, deep shadows, luxury easing
   —————————————————————————————————————————————————————————— */
[data-theme="royal_premium"] {
  --theme-radius-card:    20px;
  --theme-radius-btn:     12px;
  --theme-radius-input:   8px;
  --theme-radius-badge:   9999px;
  --theme-shadow-card:    0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(167,139,250,0.1);
  --theme-shadow-hover:   0 16px 48px rgba(0,0,0,0.75), 0 0 40px rgba(167,139,250,0.3);
  --theme-transition:     all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --theme-transition-fast: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --theme-reading-width:  700px;
  --theme-body-size:      1.1rem;
  --theme-body-line:      1.9;
  --theme-heading-spacing: -0.02em;
  --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
}

[data-theme="royal_premium"] .hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 3.5rem;
}

[data-theme="royal_premium"] .article-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.8rem;
}

[data-theme="royal_premium"] .article-content h1,
[data-theme="royal_premium"] .article-content h2,
[data-theme="royal_premium"] .article-content h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

[data-theme="royal_premium"] .article-content h2 {
  border-bottom: 1px solid rgba(167,139,250,0.2);
  font-style: italic;
  font-weight: 700;
  font-size: 1.9rem;
}

[data-theme="royal_premium"] .article-content h3 {
  font-style: italic;
  font-weight: 600;
  color: #c084fc;
}

/* Deep elegant blockquote */
[data-theme="royal_premium"] .article-content blockquote {
  border-left: 2px solid #a78bfa;
  background: rgba(139,92,246,0.08);
  padding: 1.5rem 2rem;
  border-radius: 0 12px 12px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #ddd6fe;
}

[data-theme="royal_premium"] .card-badge {
  border-radius: 9999px;
  background: rgba(167,139,250,0.2);
  border-color: rgba(167,139,250,0.35);
  color: #c084fc;
}

[data-theme="royal_premium"] .nav-link.active::after {
  background: linear-gradient(90deg, #a78bfa, #c084fc);
  border-radius: 2px;
}

/* ——————————————————————————————————————————————————————————
   9. SUNSET_MODERN: Warm Charcoal Orange Energy
   Space Grotesk headings, geometric, vibrant, modern warm
   —————————————————————————————————————————————————————————— */
[data-theme="sunset_modern"] {
  --theme-radius-card:    10px;
  --theme-radius-btn:     8px;
  --theme-radius-input:   6px;
  --theme-radius-badge:   4px;
  --theme-shadow-card:    0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(249,115,22,0.06);
  --theme-shadow-hover:   0 8px 32px rgba(0,0,0,0.55), 0 0 24px rgba(249,115,22,0.25);
  --theme-transition:     all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-reading-width:  760px;
  --theme-body-size:      1.06rem;
  --theme-body-line:      1.82;
  --theme-heading-spacing: -0.03em;
  --font-heading: 'Space Grotesk', 'Outfit', sans-serif;
  --font-body: 'DM Sans', 'Inter', sans-serif;
}

[data-theme="sunset_modern"] .hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
}

[data-theme="sunset_modern"] .article-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
}

[data-theme="sunset_modern"] .article-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  border-bottom: 1px solid rgba(249,115,22,0.2);
}

[data-theme="sunset_modern"] .article-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: #f97316;
}

/* Warm blockquote */
[data-theme="sunset_modern"] .article-content blockquote {
  border-left: 3px solid #f97316;
  background: rgba(249,115,22,0.08);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
}

[data-theme="sunset_modern"] .card-badge {
  background: rgba(249,115,22,0.15);
  border-color: rgba(249,115,22,0.3);
  color: #fb923c;
}

[data-theme="sunset_modern"] .nav-link.active::after {
  background: #f97316;
}

/* ——————————————————————————————————————————————————————————
   10. MONO_STUDIO: Monochrome Minimal Studio
   Syne headings, 0px radius, stark B&W contrast, clean cuts
   —————————————————————————————————————————————————————————— */
[data-theme="mono_studio"] {
  --theme-radius-card:    0px;
  --theme-radius-btn:     2px;
  --theme-radius-input:   2px;
  --theme-radius-badge:   0px;
  --theme-shadow-card:    0 4px 24px rgba(0,0,0,0.7);
  --theme-shadow-hover:   0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.12);
  --theme-transition:     all 0.2s ease;
  --theme-reading-width:  740px;
  --theme-body-size:      1.05rem;
  --theme-body-line:      1.8;
  --theme-heading-spacing: -0.04em;
  --font-heading: 'Syne', 'Inter', sans-serif;
}

[data-theme="mono_studio"] .hero-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
}

[data-theme="mono_studio"] .article-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
}

[data-theme="mono_studio"] .article-content h2 {
  font-family: 'Syne', 'Inter', sans-serif;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-weight: 700;
  letter-spacing: -0.03em;
}

[data-theme="mono_studio"] .article-content h3 {
  font-family: 'Syne', 'Inter', sans-serif;
  font-weight: 700;
}

/* Sharp B&W blockquote */
[data-theme="mono_studio"] .article-content blockquote {
  border-left: 3px solid #ffffff;
  background: rgba(255,255,255,0.05);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  font-style: italic;
}

[data-theme="mono_studio"] .card-badge {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #ffffff;
  border-radius: 0;
}

[data-theme="mono_studio"] .card:hover {
  border-color: rgba(255,255,255,0.4);
}

[data-theme="mono_studio"] .nav-link.active::after {
  background: #ffffff;
  border-radius: 0;
}

[data-theme="mono_studio"] .btn-primary:hover {
  background: rgba(255,255,255,0.85) !important;
  transform: translateY(-1px);
}

/* ——————————————————————————————————————————————————————————
   11. AUREON: Cinematic Luxury Black Gold Design System
   Black/Charcoal canvas (#050505/#0d0d0d/#141414)
   Warm White content (#f5f5f5/#e5e5e5)
   Metallic Gold accents (#d6a13a/#e5b85c)
   —————————————————————————————————————————————————————————— */
[data-theme="aureon"] {
  --bg-primary: #050505;
  --bg-surface: #0d0d0d;
  --bg-card: #141414;
  --bg-card-hover: #1a1a1a;
  --accent-cyan: #d6a13a;
  --accent-indigo: #e5b85c;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --text-primary: #f5f5f5;
  --text-secondary: #d4d4d4;
  --text-muted: #9e9e9e;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(214, 161, 58, 0.55);
  --font-heading: 'Outfit', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-subtle: 0 4px 24px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 0 35px rgba(214, 161, 58, 0.25);

  --text-body: #e5e5e5;
  --text-heading: #ffffff;
  --text-link: #e5b85c;
  --card-link: #ffffff;

  --bg-form: #0d0d0d;
  --bg-input: #141414;
  --border-input: rgba(255, 255, 255, 0.12);
  --placeholder-color: #737373;
  --focus-ring: #d6a13a;
  --focus-ring-shadow: rgba(214, 161, 58, 0.25);

  --btn-primary-bg: linear-gradient(135deg, #d6a13a 0%, #b37d22 100%);
  --btn-primary-text: #050505;
  --btn-secondary-bg: #141414;
  --btn-secondary-text: #e5e5e5;

  --alert-success-bg: rgba(214, 161, 58, 0.12);
  --alert-success-border: #d6a13a;
  --alert-success-text: #e5b85c;
  --alert-error-bg: rgba(244, 63, 94, 0.16);
  --alert-error-border: #f43f5e;
  --alert-error-text: #fecdd3;

  --tag-bg: rgba(214, 161, 58, 0.14);
  --tag-border: rgba(214, 161, 58, 0.3);
  --tag-text: #e5b85c;

  --bg-card-empty: #0d0d0d;
  --border-card-empty: rgba(255, 255, 255, 0.1);

  --theme-radius-card: 12px;
  --theme-radius-btn: 8px;
  --theme-radius-input: 6px;
  --theme-radius-badge: 6px;
  --theme-shadow-card: 0 6px 24px rgba(0, 0, 0, 0.75);
  --theme-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 25px rgba(214, 161, 58, 0.25);
  --theme-transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --theme-reading-width: 760px;
  --theme-body-size: 1.08rem;
  --theme-body-line: 1.85;
  --theme-heading-spacing: -0.03em;
}

[data-theme="aureon"] body {
  background-color: #050505;
  background-image: radial-gradient(circle at 50% 0%, rgba(214, 161, 58, 0.07) 0%, transparent 60%);
  color: #f5f5f5;
}

/* Header & Brand Navigation */
[data-theme="aureon"] .site-header {
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 1px solid rgba(214, 161, 58, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="aureon"] .brand-logo-badge {
  background: rgba(214, 161, 58, 0.12);
  border: 1px solid rgba(214, 161, 58, 0.3);
  color: #e5b85c;
}

[data-theme="aureon"] .nav-link {
  color: #d4d4d4;
}

[data-theme="aureon"] .nav-link:hover,
[data-theme="aureon"] .nav-link.active {
  color: #ffffff;
}

[data-theme="aureon"] .nav-link.active::after {
  background: linear-gradient(90deg, #d6a13a, #e5b85c);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(214, 161, 58, 0.35);
}

/* Buttons 3-Tier System */
[data-theme="aureon"] .btn-primary {
  background: linear-gradient(135deg, #d6a13a 0%, #b37d22 100%) !important;
  color: #050505 !important;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(214, 161, 58, 0.25);
  border-radius: 8px;
}

[data-theme="aureon"] .btn-primary:hover {
  background: linear-gradient(135deg, #e5b85c 0%, #c48e2b 100%) !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(214, 161, 58, 0.4);
}

[data-theme="aureon"] .btn-secondary {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e5e5 !important;
}

[data-theme="aureon"] .btn-secondary:hover {
  border-color: rgba(214, 161, 58, 0.45);
  color: #e5b85c !important;
}

[data-theme="aureon"] .footer-cta-btn {
  background: #141414;
  border: 1px solid rgba(214, 161, 58, 0.3);
  color: #e5b85c !important;
}

[data-theme="aureon"] .footer-cta-btn:hover {
  background: linear-gradient(135deg, #d6a13a 0%, #b37d22 100%);
  color: #050505 !important;
}

/* Typography Accent & Hero */
[data-theme="aureon"] .hero-title .accent-text {
  color: #d6a13a;
  text-shadow: 0 0 25px rgba(214, 161, 58, 0.35);
}

[data-theme="aureon"] .hero-pill {
  background: #0d0d0d;
  border: 1px solid rgba(214, 161, 58, 0.25);
  color: #e5b85c;
}

[data-theme="aureon"] .hero-pill .dot {
  background: #d6a13a;
  box-shadow: 0 0 10px #d6a13a;
}

/* Cards & Content Containers (Subtle Default, Gold Accent on Hover) */
[data-theme="aureon"] .card,
[data-theme="aureon"] .field-block,
[data-theme="aureon"] .next-story-card,
[data-theme="aureon"] .author-card,
[data-theme="aureon"] .empty-state-box,
[data-theme="aureon"] .callout-box {
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="aureon"] .card:hover,
[data-theme="aureon"] .next-story-card:hover {
  border-color: rgba(214, 161, 58, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 25px rgba(214, 161, 58, 0.2);
}

[data-theme="aureon"] .card-badge {
  background: rgba(214, 161, 58, 0.12);
  border: 1px solid rgba(214, 161, 58, 0.3);
  color: #e5b85c;
}

/* Forms & Input Controls */
[data-theme="aureon"] input[type="text"],
[data-theme="aureon"] input[type="email"],
[data-theme="aureon"] input[type="password"],
[data-theme="aureon"] textarea,
[data-theme="aureon"] select {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

[data-theme="aureon"] input:focus,
[data-theme="aureon"] textarea:focus,
[data-theme="aureon"] select:focus {
  border-color: #d6a13a;
  box-shadow: 0 0 0 3px rgba(214, 161, 58, 0.25);
  outline: none;
}

/* Article Details & Typography */
[data-theme="aureon"] .article-content h2 {
  border-bottom: 1px solid rgba(214, 161, 58, 0.2);
}

[data-theme="aureon"] .article-content h3 {
  color: #e5b85c;
}

[data-theme="aureon"] .article-content blockquote {
  border-left: 3px solid #d6a13a;
  background: rgba(214, 161, 58, 0.06);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  color: #e5e5e5;
}

[data-theme="aureon"] .article-content pre {
  background: #0d0d0d;
  border: 1px solid rgba(214, 161, 58, 0.2);
}

[data-theme="aureon"] .article-content th {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

[data-theme="aureon"] .article-content td {
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="aureon"] .article-content tr:hover td {
  background: rgba(214, 161, 58, 0.04);
}

/* Footer & Sub-bar */
[data-theme="aureon"] .site-footer {
  background: #070707;
  border-top: 1px solid rgba(214, 161, 58, 0.18);
}

[data-theme="aureon"] .footer-links-list a:hover {
  color: #e5b85c;
}

[data-theme="aureon"] .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}