/*
  RefData Hub documentation theme tokens.

  AUTO-GENERATED by scripts/generate_docs_tokens.py -- do not edit by
  hand. Source of truth: reviewer-ui/src/styles.css

  Regenerate with: python scripts/generate_docs_tokens.py
*/

/* -------------------------------------------------------------------------
   Structural tokens (geometry + motion, shared with the Reviewer UI)
   ------------------------------------------------------------------------- */

:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* -------------------------------------------------------------------------
   Base palette

   Keyed ONLY on `:root` / `[data-theme]`, never on Material's
   `[data-md-color-scheme]`. Material's bundle.js writes
   `data-md-color-scheme` onto <body> on every page, so a selector keyed
   on that attribute would re-impose its palette across the whole
   document and defeat the switcher. <html> always carries a
   `data-theme` from the anti-flash script in overrides/main.html, and
   `:root` covers the pre-JS first paint.
   ------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-hover: #e2e8f0;
  --color-bg-active: #cbd5e1;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #ffffff;
  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-focus: #6366f1;
  --color-brand-primary: #4f46e5;
  --color-brand-primary-hover: #4338ca;
  --color-brand-primary-light: #eef2ff;
  --color-brand-secondary: #8b5cf6;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #10b981;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #ef4444;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-sidebar-item-hover: #f1f5f9;
  --color-sidebar-item-active: #e0e7ff;
  --color-sidebar-text: #475569;
  --color-sidebar-text-active: #4338ca;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #e2e8f0;
  --color-widget-bg: #ffffff;
  --color-widget-border: #e2e8f0;
  --color-widget-header-bg: #f8fafc;
  /* Chart palette tokens */
  --chart-1: #4f46e5;
  --chart-2: #0284c7;
  --chart-3: #059669;
  --chart-4: #d97706;
  --chart-5: #dc2626;
  --chart-6: #9333ea;
  --chart-7: #db2777;
  --chart-8: #0891b2;
  --chart-grid: #e2e8f0;
  --chart-axis: #64748b;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-glow: 0 0 15px rgba(79, 70, 229, 0.15);
}

/* -------------------------------------------------------------------------
   Full palette set

   These come after the base block, so an explicit `[data-theme]
   selection always wins over the `:root` default.
   ------------------------------------------------------------------------- */

/* Light */
[data-theme="light"] {
  color-scheme: light;
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-hover: #e2e8f0;
  --color-bg-active: #cbd5e1;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #ffffff;
  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-focus: #6366f1;
  --color-brand-primary: #4f46e5;
  --color-brand-primary-hover: #4338ca;
  --color-brand-primary-light: #eef2ff;
  --color-brand-secondary: #8b5cf6;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #10b981;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #ef4444;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-sidebar-item-hover: #f1f5f9;
  --color-sidebar-item-active: #e0e7ff;
  --color-sidebar-text: #475569;
  --color-sidebar-text-active: #4338ca;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #e2e8f0;
  --color-widget-bg: #ffffff;
  --color-widget-border: #e2e8f0;
  --color-widget-header-bg: #f8fafc;
  /* Chart palette tokens */
  --chart-1: #4f46e5;
  --chart-2: #0284c7;
  --chart-3: #059669;
  --chart-4: #d97706;
  --chart-5: #dc2626;
  --chart-6: #9333ea;
  --chart-7: #db2777;
  --chart-8: #0891b2;
  --chart-grid: #e2e8f0;
  --chart-axis: #64748b;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-glow: 0 0 15px rgba(79, 70, 229, 0.15);
}

/* Dark */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-primary: #0b0f19;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1f2937;
  --color-bg-hover: #374151;
  --color-bg-active: #4b5563;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #e5e7eb;
  --color-text-tertiary: #9ca3af;
  --color-text-inverse: #030712;
  --color-border-primary: #1f2937;
  --color-border-secondary: #374151;
  --color-border-focus: #818cf8;
  --color-brand-primary: #6366f1;
  --color-brand-primary-hover: #818cf8;
  --color-brand-primary-light: #1e1b4b;
  --color-brand-secondary: #a78bfa;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #34d399;
  --color-brand-warning: #fbbf24;
  --color-brand-danger: #f87171;
  --color-sidebar-bg: #0f172a;
  --color-sidebar-border: #1e293b;
  --color-sidebar-item-hover: #1e293b;
  --color-sidebar-item-active: #1e1b4b;
  --color-sidebar-text: #94a3b8;
  --color-sidebar-text-active: #818cf8;
  --color-topbar-bg: rgba(15, 23, 42, 0.85);
  --color-topbar-border: #1e293b;
  --color-widget-bg: #0f172a;
  --color-widget-border: #1e293b;
  --color-widget-header-bg: #1e293b;
  --chart-1: #6366f1;
  --chart-2: #38bdf8;
  --chart-3: #34d399;
  --chart-4: #fbbf24;
  --chart-5: #f87171;
  --chart-6: #c084fc;
  --chart-7: #f472b6;
  --chart-8: #22d3ee;
  --chart-grid: #1e293b;
  --chart-axis: #9ca3af;
  --chart-tooltip-bg: #111827;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.25);
}

/* Midnight Marina */
[data-theme="midnight-marina"] {
  color-scheme: dark;
  --color-bg-primary: #030712;
  --color-bg-secondary: #0b1329;
  --color-bg-tertiary: #132040;
  --color-bg-hover: #1a2c56;
  --color-bg-active: #233a6f;
  --color-text-primary: #f0f9ff;
  --color-text-secondary: #bae6fd;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #030712;
  --color-border-primary: #132a4a;
  --color-border-secondary: #1e3a8a;
  --color-border-focus: #06b6d4;
  --color-brand-primary: #06b6d4;
  --color-brand-primary-hover: #22d3ee;
  --color-brand-primary-light: #083344;
  --color-brand-secondary: #14b8a6;
  --color-brand-accent-contrast: #030712;
  --color-brand-success: #2dd4bf;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #f43f5e;
  --color-sidebar-bg: #070e20;
  --color-sidebar-border: #132a4a;
  --color-sidebar-item-hover: #132040;
  --color-sidebar-item-active: #083344;
  --color-sidebar-text: #64748b;
  --color-sidebar-text-active: #22d3ee;
  --color-topbar-bg: rgba(11, 19, 41, 0.85);
  --color-topbar-border: #132a4a;
  --color-widget-bg: #0b1329;
  --color-widget-border: #132a4a;
  --color-widget-header-bg: #132040;
  --chart-1: #06b6d4;
  --chart-2: #14b8a6;
  --chart-3: #3b82f6;
  --chart-4: #a855f7;
  --chart-5: #38bdf8;
  --chart-6: #f43f5e;
  --chart-7: #fbbf24;
  --chart-8: #2dd4bf;
  --chart-grid: #132a4a;
  --chart-axis: #7dd3fc;
  --chart-tooltip-bg: #0b1329;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* Burj Gold */
[data-theme="burj-gold"] {
  color-scheme: dark;
  --color-bg-primary: #0b0b0d;
  --color-bg-secondary: #141417;
  --color-bg-tertiary: #222227;
  --color-bg-hover: #2e2e36;
  --color-bg-active: #3a3a44;
  --color-text-primary: #fcfbf7;
  --color-text-secondary: #e4dfd3;
  --color-text-tertiary: #999385;
  --color-text-inverse: #0b0b0d;
  --color-border-primary: #282723;
  --color-border-secondary: #3d3b34;
  --color-border-focus: #d4af37;
  --color-brand-primary: #d4af37;
  --color-brand-primary-hover: #e6c35c;
  --color-brand-primary-light: #2a2410;
  --color-brand-secondary: #f59e0b;
  --color-brand-accent-contrast: #0b0b0d;
  --color-brand-success: #10b981;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #ef4444;
  --color-sidebar-bg: #111114;
  --color-sidebar-border: #282723;
  --color-sidebar-item-hover: #222227;
  --color-sidebar-item-active: #2a2410;
  --color-sidebar-text: #999385;
  --color-sidebar-text-active: #e6c35c;
  --color-topbar-bg: rgba(20, 20, 23, 0.85);
  --color-topbar-border: #282723;
  --color-widget-bg: #141417;
  --color-widget-border: #282723;
  --color-widget-header-bg: #222227;
  --chart-1: #d4af37;
  --chart-2: #f59e0b;
  --chart-3: #eab308;
  --chart-4: #10b981;
  --chart-5: #ec4899;
  --chart-6: #8b5cf6;
  --chart-7: #38bdf8;
  --chart-8: #f97316;
  --chart-grid: #282723;
  --chart-axis: #a39e93;
  --chart-tooltip-bg: #141417;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.25);
}

/* Desert Dusk */
[data-theme="desert-dusk"] {
  color-scheme: light;
  --color-bg-primary: #faf6f0;
  --color-bg-secondary: #fffdfa;
  --color-bg-tertiary: #f3ebe1;
  --color-bg-hover: #e7dccf;
  --color-bg-active: #dbcabe;
  --color-text-primary: #2c1d11;
  --color-text-secondary: #523e2f;
  --color-text-tertiary: #826c5b;
  --color-text-inverse: #fffdfa;
  --color-border-primary: #ebdcd0;
  --color-border-secondary: #d8c3b3;
  --color-border-focus: #c85a32;
  --color-brand-primary: #c85a32;
  --color-brand-primary-hover: #b04823;
  --color-brand-primary-light: #fbece5;
  --color-brand-secondary: #d97706;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #059669;
  --color-brand-warning: #d97706;
  --color-brand-danger: #dc2626;
  --color-sidebar-bg: #fffdfa;
  --color-sidebar-border: #ebdcd0;
  --color-sidebar-item-hover: #f3ebe1;
  --color-sidebar-item-active: #fbece5;
  --color-sidebar-text: #826c5b;
  --color-sidebar-text-active: #c85a32;
  --color-topbar-bg: rgba(255, 253, 250, 0.85);
  --color-topbar-border: #ebdcd0;
  --color-widget-bg: #fffdfa;
  --color-widget-border: #ebdcd0;
  --color-widget-header-bg: #f3ebe1;
  --chart-1: #c85a32;
  --chart-2: #d97706;
  --chart-3: #e11d48;
  --chart-4: #7c2d12;
  --chart-5: #059669;
  --chart-6: #7c3aed;
  --chart-7: #2563eb;
  --chart-8: #0284c7;
  --chart-grid: #ebdcd0;
  --chart-axis: #826c5b;
  --chart-tooltip-bg: #fffdfa;
  --shadow-sm: 0 1px 2px 0 rgb(180 120 80 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(180 120 80 / 0.1), 0 2px 4px -2px rgb(180 120 80 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(180 120 80 / 0.12), 0 4px 6px -4px rgb(180 120 80 / 0.08);
  --shadow-glow: 0 0 15px rgba(200, 90, 50, 0.2);
}

/* Oasis */
[data-theme="oasis"] {
  color-scheme: light;
  --color-bg-primary: #f4f8f6;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #e6f0eb;
  --color-bg-hover: #d3e3db;
  --color-bg-active: #bed4c8;
  --color-text-primary: #062c1e;
  --color-text-secondary: #1c4d39;
  --color-text-tertiary: #4a7865;
  --color-text-inverse: #ffffff;
  --color-border-primary: #d1e4db;
  --color-border-secondary: #b2d3c3;
  --color-border-focus: #059669;
  --color-brand-primary: #059669;
  --color-brand-primary-hover: #047857;
  --color-brand-primary-light: #e6f4ed;
  --color-brand-secondary: #10b981;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #10b981;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #ef4444;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #d1e4db;
  --color-sidebar-item-hover: #e6f0eb;
  --color-sidebar-item-active: #e6f4ed;
  --color-sidebar-text: #4a7865;
  --color-sidebar-text-active: #047857;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #d1e4db;
  --color-widget-bg: #ffffff;
  --color-widget-border: #d1e4db;
  --color-widget-header-bg: #e6f0eb;
  --chart-1: #059669;
  --chart-2: #10b981;
  --chart-3: #0284c7;
  --chart-4: #0d9488;
  --chart-5: #84cc16;
  --chart-6: #d97706;
  --chart-7: #8b5cf6;
  --chart-8: #e11d48;
  --chart-grid: #d1e4db;
  --chart-axis: #4a7865;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(5 150 105 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(5 150 105 / 0.08), 0 2px 4px -2px rgb(5 150 105 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(5 150 105 / 0.1), 0 4px 6px -4px rgb(5 150 105 / 0.05);
  --shadow-glow: 0 0 15px rgba(5, 150, 105, 0.2);
}

/* Harbour Blue */
[data-theme="harbour-blue"] {
  color-scheme: light;
  --color-bg-primary: #f5f7fa;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #edf1f7;
  --color-bg-hover: #e1e8f1;
  --color-bg-active: #cfdceb;
  --color-text-primary: #191a23;
  --color-text-secondary: #45484f;
  --color-text-tertiary: #6e727a;
  --color-text-inverse: #ffffff;
  --color-border-primary: #dce2ea;
  --color-border-secondary: #c3cdda;
  --color-border-focus: #226db4;
  --color-brand-primary: #226db4;
  --color-brand-primary-hover: #1a569a;
  --color-brand-primary-light: #e6eff9;
  --color-brand-secondary: #089949;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #077a3d;
  --color-brand-warning: #b8730a;
  --color-brand-danger: #ce2232;
  --color-sidebar-bg: #f4f7fb;
  --color-sidebar-border: #dce2ea;
  --color-sidebar-item-hover: #e7eff8;
  --color-sidebar-item-active: #d8e7f6;
  --color-sidebar-text: #4a5568;
  --color-sidebar-text-active: #1a569a;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #dce2ea;
  --color-widget-bg: #ffffff;
  --color-widget-border: #dce2ea;
  --color-widget-header-bg: #f5f7fa;
  /* Chart palette — the four Zoho brand primaries, then supporting hues */
  --chart-1: #226db4;
  --chart-2: #089949;
  --chart-3: #ce2232;
  --chart-4: #f9b21d;
  --chart-5: #0974b0;
  --chart-6: #7a5ac8;
  --chart-7: #12a5b8;
  --chart-8: #e4713b;
  --chart-grid: #dce2ea;
  --chart-axis: #6e727a;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(25 60 100 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(25 60 100 / 0.08), 0 2px 4px -2px rgb(25 60 100 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(25 60 100 / 0.1), 0 4px 6px -4px rgb(25 60 100 / 0.05);
  --shadow-glow: 0 0 15px rgba(34, 109, 180, 0.2);
}

/* Aurora */
[data-theme="aurora"] {
  color-scheme: dark;
  --color-bg-primary: #090714;
  --color-bg-secondary: #120e24;
  --color-bg-tertiary: #1e1838;
  --color-bg-hover: #2d2452;
  --color-bg-active: #3d316e;
  --color-text-primary: #f5f3ff;
  --color-text-secondary: #ddd6fe;
  --color-text-tertiary: #9488c6;
  --color-text-inverse: #090714;
  --color-border-primary: #29204c;
  --color-border-secondary: #3b2e6b;
  --color-border-focus: #d946ef;
  --color-brand-primary: #d946ef;
  --color-brand-primary-hover: #e879f9;
  --color-brand-primary-light: #3b0764;
  --color-brand-secondary: #06b6d4;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #34d399;
  --color-brand-warning: #fbbf24;
  --color-brand-danger: #f87171;
  --color-sidebar-bg: #0d0a1c;
  --color-sidebar-border: #29204c;
  --color-sidebar-item-hover: #1e1838;
  --color-sidebar-item-active: #3b0764;
  --color-sidebar-text: #9488c6;
  --color-sidebar-text-active: #e879f9;
  --color-topbar-bg: rgba(18, 14, 36, 0.85);
  --color-topbar-border: #29204c;
  --color-widget-bg: #120e24;
  --color-widget-border: #29204c;
  --color-widget-header-bg: #1e1838;
  --chart-1: #d946ef;
  --chart-2: #06b6d4;
  --chart-3: #8b5cf6;
  --chart-4: #ec4899;
  --chart-5: #3b82f6;
  --chart-6: #10b981;
  --chart-7: #f59e0b;
  --chart-8: #a855f7;
  --chart-grid: #29204c;
  --chart-axis: #a78bfa;
  --chart-tooltip-bg: #120e24;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 22px rgba(217, 70, 239, 0.3);
}

/* Coral Reef */
[data-theme="coral-reef"] {
  color-scheme: light;
  --color-bg-primary: #f7fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #edf2f7;
  --color-bg-hover: #e2e8f0;
  --color-bg-active: #cbd5e1;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #ffffff;
  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-focus: #ff6b6b;
  --color-brand-primary: #ff6b6b;
  --color-brand-primary-hover: #ff5252;
  --color-brand-primary-light: #fff0f0;
  --color-brand-secondary: #00b4d8;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #10b981;
  --color-brand-warning: #f59e0b;
  --color-brand-danger: #ef4444;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-sidebar-item-hover: #edf2f7;
  --color-sidebar-item-active: #fff0f0;
  --color-sidebar-text: #475569;
  --color-sidebar-text-active: #ff5252;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #e2e8f0;
  --color-widget-bg: #ffffff;
  --color-widget-border: #e2e8f0;
  --color-widget-header-bg: #f7fafc;
  --chart-1: #ff6b6b;
  --chart-2: #00b4d8;
  --chart-3: #f59e0b;
  --chart-4: #10b981;
  --chart-5: #8b5cf6;
  --chart-6: #ec4899;
  --chart-7: #06b6d4;
  --chart-8: #84cc16;
  --chart-grid: #e2e8f0;
  --chart-axis: #64748b;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(255 107 107 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(255 107 107 / 0.08), 0 2px 4px -2px rgb(255 107 107 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(255 107 107 / 0.1), 0 4px 6px -4px rgb(255 107 107 / 0.05);
  --shadow-glow: 0 0 18px rgba(255, 107, 107, 0.25);
}

/* Classic Dark */
[data-theme="classic-dark"] {
  color-scheme: dark;
  --color-bg-primary: #020617;
  --color-bg-secondary: #0f172a;
  --color-bg-tertiary: #1e293b;
  --color-bg-hover: #334155;
  --color-bg-active: #475569;
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #020617;
  --color-border-primary: #1e293b;
  --color-border-secondary: #334155;
  --color-border-focus: #6366f1;
  --color-brand-primary: #6366f1;
  --color-brand-primary-hover: #818cf8;
  --color-brand-primary-light: #1e1b4b;
  --color-brand-secondary: #22d3ee;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #34d399;
  --color-brand-warning: #fbbf24;
  --color-brand-danger: #f87171;
  --color-sidebar-bg: #070b1a;
  --color-sidebar-border: #1e293b;
  --color-sidebar-item-hover: #0f1c38;
  --color-sidebar-item-active: #1e1b4b;
  --color-sidebar-text: #94a3b8;
  --color-sidebar-text-active: #818cf8;
  --color-topbar-bg: rgba(15, 23, 42, 0.85);
  --color-topbar-border: #1e293b;
  --color-widget-bg: #0f172a;
  --color-widget-border: #1e293b;
  --color-widget-header-bg: #16233a;
  --chart-1: #6366f1;
  --chart-2: #22d3ee;
  --chart-3: #a855f7;
  --chart-4: #38bdf8;
  --chart-5: #818cf8;
  --chart-6: #2dd4bf;
  --chart-7: #60a5fa;
  --chart-8: #c084fc;
  --chart-grid: #1e293b;
  --chart-axis: #94a3b8;
  --chart-tooltip-bg: #111827;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.45);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 30px -16px rgb(99 102 241 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* Classic Light */
[data-theme="classic-light"] {
  color-scheme: light;
  --color-bg-primary: #f8fafc;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-hover: #e2e8f0;
  --color-bg-active: #cbd5e1;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #ffffff;
  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-focus: #6366f1;
  --color-brand-primary: #6366f1;
  --color-brand-primary-hover: #4f46e5;
  --color-brand-primary-light: #eef2ff;
  --color-brand-secondary: #22d3ee;
  --color-brand-accent-contrast: #ffffff;
  --color-brand-success: #059669;
  --color-brand-warning: #d97706;
  --color-brand-danger: #dc2626;
  --color-sidebar-bg: #ffffff;
  --color-sidebar-border: #e2e8f0;
  --color-sidebar-item-hover: #f1f5f9;
  --color-sidebar-item-active: #eef2ff;
  --color-sidebar-text: #475569;
  --color-sidebar-text-active: #4f46e5;
  --color-topbar-bg: rgba(255, 255, 255, 0.85);
  --color-topbar-border: #e2e8f0;
  --color-widget-bg: #ffffff;
  --color-widget-border: #e2e8f0;
  --color-widget-header-bg: #f8fafc;
  --chart-1: #6366f1;
  --chart-2: #22d3ee;
  --chart-3: #a855f7;
  --chart-4: #0ea5e9;
  --chart-5: #4f46e5;
  --chart-6: #14b8a6;
  --chart-7: #8b5cf6;
  --chart-8: #38bdf8;
  --chart-grid: #e2e8f0;
  --chart-axis: #64748b;
  --chart-tooltip-bg: #ffffff;
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 12px 30px -16px rgb(99 102 241 / 0.35), 0 4px 6px -4px rgb(15 23 42 / 0.06);
  --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.18);
}

/* Midnight */
[data-theme="midnight"] {
  color-scheme: dark;
  --color-bg-primary: #0b1224;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1a2240;
  --color-bg-hover: #273055;
  --color-bg-active: #343e6b;
  --color-text-primary: #e0e7ff;
  --color-text-secondary: #c7d2fe;
  --color-text-tertiary: #a5b4fc;
  --color-text-inverse: #0b1224;
  --color-border-primary: #232c56;
  --color-border-secondary: #33407a;
  --color-border-focus: #818cf8;
  --color-brand-primary: #818cf8;
  --color-brand-primary-hover: #a5b4fc;
  --color-brand-primary-light: #1e1b4b;
  --color-brand-secondary: #22d3ee;
  --color-brand-accent-contrast: #0b1224;
  --color-brand-success: #34d399;
  --color-brand-warning: #fbbf24;
  --color-brand-danger: #f87171;
  --color-sidebar-bg: #0b1224;
  --color-sidebar-border: #232c56;
  --color-sidebar-item-hover: #16204a;
  --color-sidebar-item-active: #1e1b4b;
  --color-sidebar-text: #a5b4fc;
  --color-sidebar-text-active: #c7d2fe;
  --color-topbar-bg: rgba(11, 18, 36, 0.85);
  --color-topbar-border: #232c56;
  --color-widget-bg: #0b1124;
  --color-widget-border: #232c56;
  --color-widget-header-bg: #141d3f;
  --chart-1: #818cf8;
  --chart-2: #c7d2fe;
  --chart-3: #22d3ee;
  --chart-4: #a5b4fc;
  --chart-5: #67e8f9;
  --chart-6: #c084fc;
  --chart-7: #34d399;
  --chart-8: #f472b6;
  --chart-grid: #232c56;
  --chart-axis: #a5b4fc;
  --chart-tooltip-bg: #111827;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 12px 30px -16px rgb(129 140 248 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px rgba(129, 140, 248, 0.28);
}