/**
 * QualityMax Design System — Zinc / Indigo
 * Dark-first: :root = dark mode, [data-theme="light"] = light
 * Palette: zinc backgrounds + indigo/violet accents
 */

/* =============================================
   DARK THEME (Default / :root)
   Zinc-950 → zinc-700, indigo-500/400 accents
   ============================================= */
:root {
  /* Core backgrounds */
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --bg-elevated: #1c1c22;
  --bg-hover: #27272a;
  --bg-active: #3f3f46;
  --bg-page: #09090b;

  /* Text */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-muted: #52525b;
  --text-inverse: #09090b;
  --text-link: #818cf8;
  --text-link-hover: #a5b4fc;

  /* Borders */
  --border-default: #27272a;
  --border-light: #18181b;
  --border-strong: #3f3f46;
  --border-focus: #6366f1;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

  /* Header */
  --header-bg: #18181b;
  --header-text: #fafafa;
  --header-border: #27272a;

  /* Sidebar */
  --sidebar-bg: #111114;
  --sidebar-text: #a1a1aa;
  --sidebar-text-muted: #52525b;
  --sidebar-hover: #27272a;
  --sidebar-active-bg: rgba(99, 102, 241, 0.15);
  --sidebar-active-text: #818cf8;
  --sidebar-border: #27272a;

  /* Accent */
  --accent-primary: #6366f1;
  --accent-primary-hover: #818cf8;
  --accent-primary-light: rgba(99, 102, 241, 0.15);
  --accent-secondary: #a78bfa;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* Semantic */
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-text: #4ade80;
  --success-border: #22c55e;
  --success-solid: #22c55e;

  --error-bg: rgba(239, 68, 68, 0.1);
  --error-text: #f87171;
  --error-border: #ef4444;
  --error-solid: #ef4444;

  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-text: #fbbf24;
  --warning-border: #f59e0b;
  --warning-solid: #f59e0b;

  --info-bg: rgba(99, 102, 241, 0.1);
  --info-text: #818cf8;
  --info-border: #6366f1;
  --info-solid: #6366f1;

  /* Buttons */
  --btn-primary-bg: #6366f1;
  --btn-primary-hover: #818cf8;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-hover: #27272a;
  --btn-secondary-text: #a1a1aa;
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #f87171;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #22c55e;
  --btn-success-hover: #4ade80;
  --btn-success-text: #ffffff;

  /* Inputs */
  --input-bg: #09090b;
  --input-border: #27272a;
  --input-border-hover: #3f3f46;
  --input-border-focus: #6366f1;
  --input-text: #fafafa;
  --input-placeholder: #52525b;

  /* Cards */
  --card-bg: #18181b;
  --card-border: #27272a;
  --card-shadow: none;
  --card-hover-shadow: var(--shadow-sm);

  /* Tables */
  --table-header-bg: transparent;
  --table-header-text: #71717a;
  --table-row-bg: #18181b;
  --table-row-alt-bg: #1c1c20;
  --table-row-hover: #27272a;
  --table-border: #27272a;

  /* Modals */
  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-bg: #1c1c22;
  --modal-border: #27272a;

  /* Code */
  --code-bg: #27272a;
  --code-text: #f87171;
  --code-block-bg: #09090b;
  --code-block-text: #e4e4e7;

  /* Chat */
  --chat-bg: #18181b;
  --chat-user-bg: #6366f1;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #27272a;
  --chat-assistant-text: #fafafa;
  --chat-input-bg: #09090b;
  --chat-input-border: #27272a;

  /* Badges */
  --badge-default-bg: #27272a;
  --badge-default-text: #a1a1aa;
  --badge-blue-bg: rgba(99, 102, 241, 0.1);
  --badge-blue-text: #818cf8;
  --badge-green-bg: rgba(34, 197, 94, 0.1);
  --badge-green-text: #4ade80;
  --badge-red-bg: rgba(239, 68, 68, 0.1);
  --badge-red-text: #f87171;
  --badge-yellow-bg: rgba(245, 158, 11, 0.1);
  --badge-yellow-text: #fbbf24;
  --badge-purple-bg: rgba(139, 92, 246, 0.1);
  --badge-purple-text: #a78bfa;

  /* Spacing tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius tokens */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', monospace;

  /* Type scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Transitions / motion */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-base) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);

  /* Z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-sidebar: 400;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
  --z-tooltip: 1100;
  --z-debug: 9999;

  /* Breakpoints — canonical 3-tier (480 / 768 / 1024).
     Use in @media queries directly; CSS custom properties are not
     valid inside @media rules, so these are documentation tokens
     that JS reads via getComputedStyle. */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Container max-widths */
  --container-sm: 480px;
  --container-md: 720px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Layout dimensions */
  --header-height: 48px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;

  /* Repository Discovery Map (Atlas) */
  --map-shell-bg: #0a0b10;
  --map-shell-glow-1: rgba(139, 92, 246, 0.17);
  --map-shell-glow-2: rgba(34, 211, 238, 0.1);
  --map-shell-border: #262833;
  --map-text: #e5e7eb;
  --map-text-strong: #f9fafb;
  --map-text-secondary: #9ca3af;
  --map-text-tertiary: #777d8d;
  --map-kicker: #a78bfa;
  --map-violet: #8b5cf6;
  --map-cyan: #22d3ee;
  --map-green: #34d399;
  --map-card-bg: rgba(17, 19, 27, 0.82);
  --map-card-border: #292c38;
  --map-track-bg: #1c1e27;
  --map-progress-glow: rgba(34, 211, 238, 0.65);
  --map-legend-text: #818797;
  --map-legend-btn-bg: rgba(139, 92, 246, 0.09);
  --map-legend-btn-border: rgba(139, 92, 246, 0.25);
  --map-legend-btn-text: #c4b5fd;
  --map-fog-dot: #323541;
  --map-canvas-border: #20232d;
  --map-canvas-bg: #08090d;
  --map-canvas-glow: rgba(27, 29, 40, 0.55);
  --map-grid-line: rgba(255, 255, 255, 0.018);
  --map-stage-label: #8b91a1;
  --map-stage-count: #4f5564;
  --map-edge: #292d38;
  --map-edge-grounded: #6d5bd0;
  --map-node-bg: rgba(19, 21, 29, 0.94);
  --map-node-border: #303441;
  --map-node-hover-bg: #191624;
  --map-node-hover-glow: rgba(139, 92, 246, 0.35);
  --map-node-dot: #646b7b;
  --map-node-dot-repository: #f3f4f6;
  --map-node-label: #d7d9e0;
  --map-node-meta: #666c7b;
  --map-inspector-bg: rgba(13, 15, 21, 0.88);
  --map-inspector-border: #242731;
  --map-code-text: #67e8f9;
  --map-code-bg: #111827;
}

/* =============================================
   LIGHT THEME
   ============================================= */
[data-theme="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #e4e4e7;
  --bg-elevated: #ffffff;
  --bg-hover: #e4e4e7;
  --bg-active: #d4d4d8;
  --bg-page: #fafafa;

  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-tertiary: #71717a;
  --text-muted: #a1a1aa;
  --text-inverse: #fafafa;
  --text-link: #4f46e5;
  --text-link-hover: #6366f1;

  --border-default: #e4e4e7;
  --border-light: #f4f4f5;
  --border-strong: #d4d4d8;
  --border-focus: #4f46e5;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --header-bg: #ffffff;
  --header-text: #09090b;
  --header-border: #e4e4e7;

  --sidebar-bg: #f4f4f5;
  --sidebar-text: #52525b;
  --sidebar-text-muted: #a1a1aa;
  --sidebar-hover: #e4e4e7;
  --sidebar-active-bg: rgba(79, 70, 229, 0.1);
  --sidebar-active-text: #4f46e5;
  --sidebar-border: #e4e4e7;

  --accent-primary: #4f46e5;
  --accent-primary-hover: #6366f1;
  --accent-primary-light: rgba(79, 70, 229, 0.1);
  --accent-secondary: #7c3aed;
  --accent-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);

  --success-bg: #dcfce7;
  --success-text: #166534;
  --success-border: #86efac;
  --success-solid: #22c55e;

  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --error-border: #fca5a5;
  --error-solid: #ef4444;

  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --warning-border: #fcd34d;
  --warning-solid: #f59e0b;

  --info-bg: #eef2ff;
  --info-text: #3730a3;
  --info-border: #a5b4fc;
  --info-solid: #4f46e5;

  --btn-primary-bg: #4f46e5;
  --btn-primary-hover: #4338ca;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-hover: #e4e4e7;
  --btn-secondary-text: #52525b;
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #22c55e;
  --btn-success-hover: #16a34a;
  --btn-success-text: #ffffff;

  --input-bg: #ffffff;
  --input-border: #d4d4d8;
  --input-border-hover: #a1a1aa;
  --input-border-focus: #4f46e5;
  --input-text: #09090b;
  --input-placeholder: #a1a1aa;

  --card-bg: #ffffff;
  --card-border: #e4e4e7;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #fafafa;
  --table-header-text: #71717a;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #fafafa;
  --table-row-hover: #f4f4f5;
  --table-border: #e4e4e7;

  --modal-overlay: rgba(9, 9, 11, 0.5);
  --modal-bg: #ffffff;
  --modal-border: #e4e4e7;

  --code-bg: #f4f4f5;
  --code-text: #dc2626;
  --code-block-bg: #18181b;
  --code-block-text: #fafafa;

  --chat-bg: #ffffff;
  --chat-user-bg: #4f46e5;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #f4f4f5;
  --chat-assistant-text: #09090b;
  --chat-input-bg: #ffffff;
  --chat-input-border: #d4d4d8;

  --badge-default-bg: #f4f4f5;
  --badge-default-text: #52525b;
  --badge-blue-bg: #eef2ff;
  --badge-blue-text: #4338ca;
  --badge-green-bg: #dcfce7;
  --badge-green-text: #166534;
  --badge-red-bg: #fee2e2;
  --badge-red-text: #991b1b;
  --badge-yellow-bg: #fef3c7;
  --badge-yellow-text: #92400e;
  --badge-purple-bg: #f3e8ff;
  --badge-purple-text: #6b21a8;

  /* Repository Discovery Map (Atlas) */
  --map-shell-bg: #fafafa;
  --map-shell-glow-1: rgba(99, 102, 241, 0.06);
  --map-shell-glow-2: rgba(8, 145, 178, 0.06);
  --map-shell-border: #e4e4e7;
  --map-text: #18181b;
  --map-text-strong: #09090b;
  --map-text-secondary: #52525b;
  --map-text-tertiary: #71717a;
  --map-kicker: #6d28d9;
  --map-violet: #7c3aed;
  --map-cyan: #0891b2;
  --map-green: #059669;
  --map-card-bg: #f4f4f5;
  --map-card-border: #e4e4e7;
  --map-track-bg: #e4e4e7;
  --map-progress-glow: rgba(8, 145, 178, 0.35);
  --map-legend-text: #71717a;
  --map-legend-btn-bg: rgba(124, 58, 237, 0.08);
  --map-legend-btn-border: rgba(124, 58, 237, 0.25);
  --map-legend-btn-text: #6d28d9;
  --map-fog-dot: #d4d4d8;
  --map-canvas-border: #e4e4e7;
  --map-canvas-bg: #f4f4f5;
  --map-canvas-glow: rgba(228, 228, 231, 0.6);
  --map-grid-line: rgba(0, 0, 0, 0.035);
  --map-stage-label: #52525b;
  --map-stage-count: #a1a1aa;
  --map-edge: #d4d4d8;
  --map-edge-grounded: #7c3aed;
  --map-node-bg: #ffffff;
  --map-node-border: #e4e4e7;
  --map-node-hover-bg: #f5f3ff;
  --map-node-hover-glow: rgba(124, 58, 237, 0.25);
  --map-node-dot: #a1a1aa;
  --map-node-dot-repository: #18181b;
  --map-node-label: #27272a;
  --map-node-meta: #71717a;
  --map-inspector-bg: #ffffff;
  --map-inspector-border: #e4e4e7;
  --map-code-text: #0e7490;
  --map-code-bg: #ecfeff;
}

/* =============================================
   STAR WARS DARK THEME
   ============================================= */
[data-theme="starwars-dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --bg-elevated: #1a1a1a;
  --bg-hover: #2a2a2a;
  --bg-active: #3a3a3a;
  --bg-page: #0a0a0a;

  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #808080;
  --text-muted: #606060;
  --text-inverse: #0a0a0a;
  --text-link: #ff4444;
  --text-link-hover: #ff6666;

  --border-default: #333333;
  --border-light: #1a1a1a;
  --border-strong: #444444;
  --border-focus: #ff4444;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.6);

  --header-bg: linear-gradient(135deg, #1a0000 0%, #0a0a0a 100%);
  --header-text: #e0e0e0;
  --header-border: #ff4444;

  --sidebar-bg: #121212;
  --sidebar-text: #d0d0d0;
  --sidebar-text-muted: #808080;
  --sidebar-hover: #2a2a2a;
  --sidebar-active-bg: #cc0000;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #333333;

  --accent-primary: #ff4444;
  --accent-primary-hover: #ff6666;
  --accent-primary-light: #330000;
  --accent-secondary: #888888;
  --accent-gradient: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);

  --success-bg: #0a2a0a;
  --success-text: #66ff66;
  --success-border: #44cc44;
  --success-solid: #44cc44;

  --error-bg: #2a0a0a;
  --error-text: #ff6666;
  --error-border: #ff4444;
  --error-solid: #ff4444;

  --warning-bg: #2a2a0a;
  --warning-text: #ffcc44;
  --warning-border: #ccaa00;
  --warning-solid: #ccaa00;

  --info-bg: #0a0a2a;
  --info-text: #6666ff;
  --info-border: #4444cc;
  --info-solid: #4444cc;

  --btn-primary-bg: #cc0000;
  --btn-primary-hover: #ff4444;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #2a2a2a;
  --btn-secondary-hover: #3a3a3a;
  --btn-secondary-text: #d0d0d0;
  --btn-danger-bg: #aa0000;
  --btn-danger-hover: #cc0000;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #006600;
  --btn-success-hover: #008800;
  --btn-success-text: #ffffff;

  --input-bg: #1a1a1a;
  --input-border: #444444;
  --input-border-hover: #555555;
  --input-border-focus: #ff4444;
  --input-text: #e0e0e0;
  --input-placeholder: #606060;

  --card-bg: #1a1a1a;
  --card-border: #333333;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #2a2a2a;
  --table-header-text: #d0d0d0;
  --table-row-bg: #1a1a1a;
  --table-row-alt-bg: #222222;
  --table-row-hover: #2a2a2a;
  --table-border: #333333;

  --modal-overlay: rgba(0, 0, 0, 0.85);
  --modal-bg: #1a1a1a;
  --modal-border: #333333;

  --code-bg: #2a2a2a;
  --code-text: #ff6666;
  --code-block-bg: #0a0a0a;
  --code-block-text: #d0d0d0;

  --chat-bg: #1a1a1a;
  --chat-user-bg: #cc0000;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #2a2a2a;
  --chat-assistant-text: #e0e0e0;
  --chat-input-bg: #1a1a1a;
  --chat-input-border: #444444;

  --badge-default-bg: #2a2a2a;
  --badge-default-text: #b0b0b0;
  --badge-blue-bg: #0a0a2a;
  --badge-blue-text: #6666ff;
  --badge-green-bg: #0a2a0a;
  --badge-green-text: #66ff66;
  --badge-red-bg: #2a0a0a;
  --badge-red-text: #ff6666;
  --badge-yellow-bg: #2a2a0a;
  --badge-yellow-text: #ffcc44;
  --badge-purple-bg: #1a0a2a;
  --badge-purple-text: #aa66ff;
}

/* =============================================
   STRANGER THINGS DARK THEME
   ============================================= */
[data-theme="stranger-dark"] {
  --bg-primary: #050505;
  --bg-secondary: #0a0508;
  --bg-tertiary: #150a0d;
  --bg-elevated: #0a0508;
  --bg-hover: #1a0a10;
  --bg-active: #250f15;
  --bg-page: #030303;

  --text-primary: #e8d0d4;
  --text-secondary: #a08088;
  --text-tertiary: #705058;
  --text-muted: #503840;
  --text-inverse: #050505;
  --text-link: #ff0a2e;
  --text-link-hover: #ff3355;

  --border-default: #2a1018;
  --border-light: #150810;
  --border-strong: #3a1820;
  --border-focus: #ff0a2e;

  --shadow-xs: 0 0 4px rgba(255, 10, 46, 0.3);
  --shadow-sm: 0 0 8px rgba(255, 10, 46, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 16px rgba(255, 10, 46, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 24px rgba(255, 10, 46, 0.5), 0 8px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 0 32px rgba(255, 10, 46, 0.6), 0 12px 24px rgba(0, 0, 0, 0.7);

  --header-bg: linear-gradient(135deg, #0a0205 0%, #050505 50%, #0a0508 100%);
  --header-text: #e8d0d4;
  --header-border: #8b0000;

  --sidebar-bg: #080305;
  --sidebar-text: #c8a0a8;
  --sidebar-text-muted: #705058;
  --sidebar-hover: #150a0d;
  --sidebar-active-bg: #8b0000;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #2a1018;

  --accent-primary: #cc0022;
  --accent-primary-hover: #ff0a2e;
  --accent-primary-light: #1a0508;
  --accent-secondary: #8b0000;
  --accent-gradient: linear-gradient(135deg, #cc0022 0%, #8b0000 100%);

  --success-bg: #051a0a;
  --success-text: #40c070;
  --success-border: #208040;
  --success-solid: #208040;

  --error-bg: #1a0505;
  --error-text: #ff3344;
  --error-border: #cc0022;
  --error-solid: #cc0022;

  --warning-bg: #1a1005;
  --warning-text: #cc9922;
  --warning-border: #996611;
  --warning-solid: #996611;

  --info-bg: #05101a;
  --info-text: #3388cc;
  --info-border: #226699;
  --info-solid: #226699;

  --btn-primary-bg: #8b0000;
  --btn-primary-hover: #cc0022;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #150a0d;
  --btn-secondary-hover: #1a0a10;
  --btn-secondary-text: #c8a0a8;
  --btn-danger-bg: #660011;
  --btn-danger-hover: #8b0000;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #105020;
  --btn-success-hover: #208040;
  --btn-success-text: #ffffff;

  --input-bg: #0a0508;
  --input-border: #3a1820;
  --input-border-hover: #4a2028;
  --input-border-focus: #cc0022;
  --input-text: #e8d0d4;
  --input-placeholder: #503840;

  --card-bg: #0a0508;
  --card-border: #2a1018;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #150a0d;
  --table-header-text: #c8a0a8;
  --table-row-bg: #0a0508;
  --table-row-alt-bg: #0d0608;
  --table-row-hover: #150a0d;
  --table-border: #2a1018;

  --modal-overlay: rgba(5, 5, 5, 0.95);
  --modal-bg: #0a0508;
  --modal-border: #2a1018;

  --code-bg: #150a0d;
  --code-text: #ff3344;
  --code-block-bg: #050505;
  --code-block-text: #c8a0a8;

  --chat-bg: #0a0508;
  --chat-user-bg: #8b0000;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #150a0d;
  --chat-assistant-text: #e8d0d4;
  --chat-input-bg: #0a0508;
  --chat-input-border: #3a1820;

  --badge-default-bg: #150a0d;
  --badge-default-text: #a08088;
  --badge-blue-bg: #05101a;
  --badge-blue-text: #3388cc;
  --badge-green-bg: #051a0a;
  --badge-green-text: #40c070;
  --badge-red-bg: #1a0505;
  --badge-red-text: #ff3344;
  --badge-yellow-bg: #2a200a;
  --badge-yellow-text: #ffd740;
  --badge-purple-bg: #1a0a2a;
  --badge-purple-text: #ea80fc;
}

/* =============================================
   SOLARIZED LIGHT THEME
   ============================================= */
[data-theme="solarized-light"] {
  --bg-primary: #fdf6e3;
  --bg-secondary: #eee8d5;
  --bg-tertiary: #e4ddc8;
  --bg-elevated: #fdf6e3;
  --bg-hover: #eee8d5;
  --bg-active: #e4ddc8;
  --bg-page: #eee8d5;

  --text-primary: #073642;
  --text-secondary: #586e75;
  --text-tertiary: #657b83;
  --text-muted: #93a1a1;
  --text-inverse: #fdf6e3;
  --text-link: #268bd2;
  --text-link-hover: #2aa198;

  --border-default: #d3cbb7;
  --border-light: #eee8d5;
  --border-strong: #c9c1ad;
  --border-focus: #268bd2;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  --header-bg: linear-gradient(135deg, #eee8d5 0%, #e4ddc8 100%);
  --header-text: #073642;
  --header-border: #d3cbb7;

  --sidebar-bg: #e4ddc8;
  --sidebar-text: #073642;
  --sidebar-text-muted: #657b83;
  --sidebar-hover: #d6cfba;
  --sidebar-active-bg: #268bd2;
  --sidebar-active-text: #fdf6e3;
  --sidebar-border: #d3cbb7;

  --accent-primary: #268bd2;
  --accent-primary-hover: #2aa198;
  --accent-primary-light: #d5e8f2;
  --accent-secondary: #6c71c4;
  --accent-gradient: linear-gradient(135deg, #268bd2 0%, #2aa198 100%);

  --success-bg: #d9f2e6;
  --success-text: #2a6f4e;
  --success-border: #859900;
  --success-solid: #859900;

  --error-bg: #f9e2e2;
  --error-text: #9f1d1d;
  --error-border: #dc322f;
  --error-solid: #dc322f;

  --warning-bg: #faf0d4;
  --warning-text: #8a6d00;
  --warning-border: #b58900;
  --warning-solid: #b58900;

  --info-bg: #d5e8f2;
  --info-text: #1a5a7a;
  --info-border: #268bd2;
  --info-solid: #268bd2;

  --btn-primary-bg: #268bd2;
  --btn-primary-hover: #2aa198;
  --btn-primary-text: #fdf6e3;
  --btn-secondary-bg: #eee8d5;
  --btn-secondary-hover: #e4ddc8;
  --btn-secondary-text: #073642;
  --btn-danger-bg: #dc322f;
  --btn-danger-hover: #cb4b16;
  --btn-danger-text: #fdf6e3;
  --btn-success-bg: #859900;
  --btn-success-hover: #6d8000;
  --btn-success-text: #fdf6e3;

  --input-bg: #fdf6e3;
  --input-border: #c9c1ad;
  --input-border-hover: #b8b09c;
  --input-border-focus: #268bd2;
  --input-text: #073642;
  --input-placeholder: #93a1a1;

  --card-bg: #fdf6e3;
  --card-border: #d3cbb7;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #eee8d5;
  --table-header-text: #073642;
  --table-row-bg: #fdf6e3;
  --table-row-alt-bg: #f5edd8;
  --table-row-hover: #eee8d5;
  --table-border: #d3cbb7;

  --modal-overlay: rgba(0, 43, 54, 0.5);
  --modal-bg: #fdf6e3;
  --modal-border: #d3cbb7;

  --code-bg: #eee8d5;
  --code-text: #cb4b16;
  --code-block-bg: #e4ddc8;
  --code-block-text: #073642;

  --chat-bg: #fdf6e3;
  --chat-user-bg: #268bd2;
  --chat-user-text: #fdf6e3;
  --chat-assistant-bg: #eee8d5;
  --chat-assistant-text: #073642;
  --chat-input-bg: #fdf6e3;
  --chat-input-border: #c9c1ad;

  --badge-default-bg: #eee8d5;
  --badge-default-text: #586e75;
  --badge-blue-bg: #d5e8f2;
  --badge-blue-text: #268bd2;
  --badge-green-bg: #d9f2e6;
  --badge-green-text: #859900;
  --badge-red-bg: #f9e2e2;
  --badge-red-text: #dc322f;
  --badge-yellow-bg: #faf0d4;
  --badge-yellow-text: #b58900;
  --badge-purple-bg: #ebe5f5;
  --badge-purple-text: #6c71c4;
}

/* =============================================
   CARIBBEAN THEME
   ============================================= */
[data-theme="caribbean"] {
  --bg-primary: #fff8f0;
  --bg-secondary: #fef0e6;
  --bg-tertiary: #fde8dc;
  --bg-elevated: #ffffff;
  --bg-hover: #fde8dc;
  --bg-active: #fcd9c8;
  --bg-page: #fef0e6;

  --text-primary: #1a3a3a;
  --text-secondary: #2d5a5a;
  --text-tertiary: #3d7a7a;
  --text-muted: #6d9a9a;
  --text-inverse: #fff8f0;
  --text-link: #00a896;
  --text-link-hover: #02c8a8;

  --border-default: #e8d8cc;
  --border-light: #fef0e6;
  --border-strong: #d8c8bc;
  --border-focus: #00a896;

  --shadow-xs: 0 1px 2px rgba(0, 168, 150, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 168, 150, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 168, 150, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 168, 150, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 168, 150, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  --header-bg: linear-gradient(135deg, #00a896 0%, #02c8a8 100%);
  --header-text: #ffffff;
  --header-border: #00897b;

  --sidebar-bg: #e8f6f4;
  --sidebar-text: #1a3a3a;
  --sidebar-text-muted: #3d7a7a;
  --sidebar-hover: #d0ece8;
  --sidebar-active-bg: #ff6f61;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #c8e0dc;

  --accent-primary: #00a896;
  --accent-primary-hover: #02c8a8;
  --accent-primary-light: #d0f0ec;
  --accent-secondary: #ff6f61;
  --accent-gradient: linear-gradient(135deg, #00a896 0%, #ff6f61 100%);

  --success-bg: #d0f0e8;
  --success-text: #1a6a4a;
  --success-border: #00c853;
  --success-solid: #00c853;

  --error-bg: #ffe8e6;
  --error-text: #c41c00;
  --error-border: #ff6f61;
  --error-solid: #ff6f61;

  --warning-bg: #fff3e0;
  --warning-text: #e65100;
  --warning-border: #ff9800;
  --warning-solid: #ff9800;

  --info-bg: #e0f7fa;
  --info-text: #006064;
  --info-border: #00bcd4;
  --info-solid: #00bcd4;

  --btn-primary-bg: #00a896;
  --btn-primary-hover: #02c8a8;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #fde8dc;
  --btn-secondary-hover: #fcd9c8;
  --btn-secondary-text: #1a3a3a;
  --btn-danger-bg: #ff6f61;
  --btn-danger-hover: #ff8a80;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #00c853;
  --btn-success-hover: #00e676;
  --btn-success-text: #ffffff;

  --input-bg: #ffffff;
  --input-border: #d8c8bc;
  --input-border-hover: #c8b8ac;
  --input-border-focus: #00a896;
  --input-text: #1a3a3a;
  --input-placeholder: #6d9a9a;

  --card-bg: #ffffff;
  --card-border: #e8d8cc;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #e8f6f4;
  --table-header-text: #1a3a3a;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #fef8f4;
  --table-row-hover: #e8f6f4;
  --table-border: #e8d8cc;

  --modal-overlay: rgba(26, 58, 58, 0.6);
  --modal-bg: #ffffff;
  --modal-border: #e8d8cc;

  --code-bg: #e8f6f4;
  --code-text: #ff6f61;
  --code-block-bg: #fef0e6;
  --code-block-text: #1a3a3a;

  --chat-bg: #ffffff;
  --chat-user-bg: #00a896;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #e8f6f4;
  --chat-assistant-text: #1a3a3a;
  --chat-input-bg: #ffffff;
  --chat-input-border: #d8c8bc;

  --badge-default-bg: #e8f6f4;
  --badge-default-text: #2d5a5a;
  --badge-blue-bg: #e0f7fa;
  --badge-blue-text: #00838f;
  --badge-green-bg: #d0f0e8;
  --badge-green-text: #00c853;
  --badge-red-bg: #ffe8e6;
  --badge-red-text: #ff6f61;
  --badge-yellow-bg: #fff3e0;
  --badge-yellow-text: #ff9800;
  --badge-purple-bg: #f3e5f5;
  --badge-purple-text: #9c27b0;
}

/* =============================================
   AURORA DARK THEME
   ============================================= */
[data-theme="aurora-dark"] {
  --bg-primary: #0a0a1a;
  --bg-secondary: #121228;
  --bg-tertiary: #1a1a38;
  --bg-elevated: #121228;
  --bg-hover: #1a1a38;
  --bg-active: #252550;
  --bg-page: #0a0a1a;

  --text-primary: #e8e8ff;
  --text-secondary: #b8b8e0;
  --text-tertiary: #8888b0;
  --text-muted: #585880;
  --text-inverse: #0a0a1a;
  --text-link: #64ffda;
  --text-link-hover: #a0ffe8;

  --border-default: #2a2a50;
  --border-light: #1a1a38;
  --border-strong: #3a3a68;
  --border-focus: #64ffda;

  --shadow-xs: 0 1px 2px rgba(100, 255, 218, 0.05);
  --shadow-sm: 0 1px 3px rgba(100, 255, 218, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(100, 255, 218, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(100, 255, 218, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(100, 255, 218, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

  --header-bg: linear-gradient(135deg, #1a0a2e 0%, #0a1a28 100%);
  --header-text: #e8e8ff;
  --header-border: #64ffda;

  --sidebar-bg: #0f0f22;
  --sidebar-text: #d8d8f0;
  --sidebar-text-muted: #8888b0;
  --sidebar-hover: #1a1a38;
  --sidebar-active-bg: linear-gradient(135deg, #6366f1 0%, #64ffda 100%);
  --sidebar-active-text: #0a0a1a;
  --sidebar-border: #2a2a50;

  --accent-primary: #64ffda;
  --accent-primary-hover: #a0ffe8;
  --accent-primary-light: #0a2a2a;
  --accent-secondary: #c084fc;
  --accent-gradient: linear-gradient(135deg, #64ffda 0%, #c084fc 100%);

  --success-bg: #0a2a1a;
  --success-text: #64ffda;
  --success-border: #34d399;
  --success-solid: #34d399;

  --error-bg: #2a0a1a;
  --error-text: #f472b6;
  --error-border: #ec4899;
  --error-solid: #ec4899;

  --warning-bg: #2a1a0a;
  --warning-text: #fbbf24;
  --warning-border: #f59e0b;
  --warning-solid: #f59e0b;

  --info-bg: #0a1a2a;
  --info-text: #38bdf8;
  --info-border: #0ea5e9;
  --info-solid: #0ea5e9;

  --btn-primary-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --btn-primary-hover: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #1a1a38;
  --btn-secondary-hover: #252550;
  --btn-secondary-text: #d8d8f0;
  --btn-danger-bg: #ec4899;
  --btn-danger-hover: #f472b6;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #34d399;
  --btn-success-hover: #6ee7b7;
  --btn-success-text: #0a0a1a;

  --input-bg: #121228;
  --input-border: #3a3a68;
  --input-border-hover: #4a4a78;
  --input-border-focus: #64ffda;
  --input-text: #e8e8ff;
  --input-placeholder: #585880;

  --card-bg: #121228;
  --card-border: #2a2a50;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #1a1a38;
  --table-header-text: #d8d8f0;
  --table-row-bg: #121228;
  --table-row-alt-bg: #161630;
  --table-row-hover: #1a1a38;
  --table-border: #2a2a50;

  --modal-overlay: rgba(10, 10, 26, 0.9);
  --modal-bg: #121228;
  --modal-border: #2a2a50;

  --code-bg: #1a1a38;
  --code-text: #64ffda;
  --code-block-bg: #0a0a1a;
  --code-block-text: #d8d8f0;

  --chat-bg: #121228;
  --chat-user-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #1a1a38;
  --chat-assistant-text: #e8e8ff;
  --chat-input-bg: #121228;
  --chat-input-border: #3a3a68;

  --badge-default-bg: #1a1a38;
  --badge-default-text: #b8b8e0;
  --badge-blue-bg: #0a1a2a;
  --badge-blue-text: #38bdf8;
  --badge-green-bg: #0a2a1a;
  --badge-green-text: #64ffda;
  --badge-red-bg: #2a0a1a;
  --badge-red-text: #f472b6;
  --badge-yellow-bg: #2a1a0a;
  --badge-yellow-text: #fbbf24;
  --badge-purple-bg: #1a0a2a;
  --badge-purple-text: #c084fc;
}

/* =============================================
   WINTER WONDERLAND LIGHT THEME
   ============================================= */
[data-theme="winter-light"] {
  --bg-primary: #f8faff;
  --bg-secondary: #eef4fc;
  --bg-tertiary: #e4eefa;
  --bg-elevated: #ffffff;
  --bg-hover: #e4eefa;
  --bg-active: #d4e4f8;
  --bg-page: #eef4fc;

  --text-primary: #1e3a5f;
  --text-secondary: #3d5a80;
  --text-tertiary: #5d7a9a;
  --text-muted: #8daac0;
  --text-inverse: #f8faff;
  --text-link: #0077b6;
  --text-link-hover: #0096d6;

  --border-default: #d4e4f8;
  --border-light: #eef4fc;
  --border-strong: #c4d4e8;
  --border-focus: #0077b6;

  --shadow-xs: 0 1px 2px rgba(0, 119, 182, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 119, 182, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(0, 119, 182, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 119, 182, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-xl: 0 20px 25px -5px rgba(0, 119, 182, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  --header-bg: linear-gradient(135deg, #e4eefa 0%, #d4e4f8 100%);
  --header-text: #1e3a5f;
  --header-border: #c4d4e8;

  --sidebar-bg: #e4eefa;
  --sidebar-text: #1e3a5f;
  --sidebar-text-muted: #5d7a9a;
  --sidebar-hover: #d4e4f8;
  --sidebar-active-bg: #0077b6;
  --sidebar-active-text: #ffffff;
  --sidebar-border: #c4d4e8;

  --accent-primary: #0077b6;
  --accent-primary-hover: #0096d6;
  --accent-primary-light: #d5ecf8;
  --accent-secondary: #48cae4;
  --accent-gradient: linear-gradient(135deg, #0077b6 0%, #48cae4 100%);

  --success-bg: #d0f0e8;
  --success-text: #1a6a4a;
  --success-border: #38b000;
  --success-solid: #38b000;

  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --error-border: #ef4444;
  --error-solid: #ef4444;

  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --warning-border: #f59e0b;
  --warning-solid: #f59e0b;

  --info-bg: #dbeafe;
  --info-text: #1e40af;
  --info-border: #3b82f6;
  --info-solid: #3b82f6;

  --btn-primary-bg: #0077b6;
  --btn-primary-hover: #0096d6;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #e4eefa;
  --btn-secondary-hover: #d4e4f8;
  --btn-secondary-text: #1e3a5f;
  --btn-danger-bg: #ef4444;
  --btn-danger-hover: #dc2626;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #38b000;
  --btn-success-hover: #2d8a00;
  --btn-success-text: #ffffff;

  --input-bg: #ffffff;
  --input-border: #c4d4e8;
  --input-border-hover: #a4c4d8;
  --input-border-focus: #0077b6;
  --input-text: #1e3a5f;
  --input-placeholder: #8daac0;

  --card-bg: #ffffff;
  --card-border: #d4e4f8;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #eef4fc;
  --table-header-text: #1e3a5f;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f8faff;
  --table-row-hover: #eef4fc;
  --table-border: #d4e4f8;

  --modal-overlay: rgba(30, 58, 95, 0.5);
  --modal-bg: #ffffff;
  --modal-border: #d4e4f8;

  --code-bg: #eef4fc;
  --code-text: #e11d48;
  --code-block-bg: #1e3a5f;
  --code-block-text: #f8faff;

  --chat-bg: #ffffff;
  --chat-user-bg: #0077b6;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #eef4fc;
  --chat-assistant-text: #1e3a5f;
  --chat-input-bg: #ffffff;
  --chat-input-border: #c4d4e8;

  --badge-default-bg: #e4eefa;
  --badge-default-text: #3d5a80;
  --badge-blue-bg: #dbeafe;
  --badge-blue-text: #1e40af;
  --badge-green-bg: #dcfce7;
  --badge-green-text: #166534;
  --badge-red-bg: #fee2e2;
  --badge-red-text: #991b1b;
  --badge-yellow-bg: #fef3c7;
  --badge-yellow-text: #92400e;
  --badge-purple-bg: #f3e8ff;
  --badge-purple-text: #6b21a8;
}

/* =============================================
   SILENT HILL THEME
   ============================================= */
[data-theme="silenthill"] {
  --bg-primary: #1a1c1b;
  --bg-secondary: #1e2120;
  --bg-tertiary: #252827;
  --bg-elevated: #1e2120;
  --bg-hover: #2a2d2c;
  --bg-active: #303433;
  --bg-page: #141615;

  --text-primary: #a8acaa;
  --text-secondary: #808583;
  --text-tertiary: #606563;
  --text-muted: #484c4a;
  --text-inverse: #1a1c1b;
  --text-link: #7a9a8a;
  --text-link-hover: #8aaa9a;

  --border-default: #383c3a;
  --border-light: #2a2e2c;
  --border-strong: #484c4a;
  --border-focus: #7a9a8a;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 30px rgba(200, 210, 205, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 50px rgba(200, 210, 205, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 70px rgba(200, 210, 205, 0.05);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 90px rgba(200, 210, 205, 0.06);

  --header-bg: linear-gradient(180deg, #1e2120 0%, #141615 100%);
  --header-text: #a8acaa;
  --header-border: #383c3a;

  --sidebar-bg: #181a19;
  --sidebar-text: #909593;
  --sidebar-text-muted: #606563;
  --sidebar-hover: #252827;
  --sidebar-active-bg: #4a5a52;
  --sidebar-active-text: #c8ccc9;
  --sidebar-border: #2a2e2c;

  --accent-primary: #5a6a62;
  --accent-primary-hover: #6a7a72;
  --accent-primary-light: #252a28;
  --accent-secondary: #8a3535;
  --accent-gradient: linear-gradient(135deg, #5a6a62 0%, #4a5a52 100%);

  --success-bg: #1a2520;
  --success-text: #6a9a7a;
  --success-border: #4a7a5a;
  --success-solid: #4a7a5a;

  --error-bg: #251818;
  --error-text: #9a4545;
  --error-border: #6a3030;
  --error-solid: #7a3535;

  --warning-bg: #25201a;
  --warning-text: #9a7a5a;
  --warning-border: #6a5030;
  --warning-solid: #7a5a35;

  --info-bg: #1a2025;
  --info-text: #6a8a9a;
  --info-border: #4a6a7a;
  --info-solid: #4a6a7a;

  --btn-primary-bg: #4a5a52;
  --btn-primary-hover: #5a6a62;
  --btn-primary-text: #c8ccc9;
  --btn-secondary-bg: #252827;
  --btn-secondary-hover: #2a2d2c;
  --btn-secondary-text: #909593;
  --btn-danger-bg: #6a4a4a;
  --btn-danger-hover: #7a5a5a;
  --btn-danger-text: #d8c8c8;
  --btn-success-bg: #4a6a52;
  --btn-success-hover: #5a7a62;
  --btn-success-text: #c8d8cc;

  --input-bg: #1e2120;
  --input-border: #383c3a;
  --input-border-hover: #484c4a;
  --input-border-focus: #7a9a8a;
  --input-text: #a8acaa;
  --input-placeholder: #606563;

  --card-bg: #1e2120;
  --card-border: #383c3a;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #252827;
  --table-header-text: #909593;
  --table-row-bg: #1e2120;
  --table-row-alt-bg: #222524;
  --table-row-hover: #252827;
  --table-border: #383c3a;

  --modal-overlay: rgba(20, 22, 21, 0.94);
  --modal-bg: #1e2120;
  --modal-border: #383c3a;

  --code-bg: #252827;
  --code-text: #7a9a8a;
  --code-block-bg: #181a19;
  --code-block-text: #909593;

  --chat-bg: #1e2120;
  --chat-user-bg: #4a5a52;
  --chat-user-text: #c8ccc9;
  --chat-assistant-bg: #252827;
  --chat-assistant-text: #a8acaa;
  --chat-input-bg: #1e2120;
  --chat-input-border: #383c3a;

  --badge-default-bg: #252827;
  --badge-default-text: #808583;
  --badge-blue-bg: #1a2025;
  --badge-blue-text: #6a8a9a;
  --badge-green-bg: #1a2520;
  --badge-green-text: #6a9a7a;
  --badge-red-bg: #251a1a;
  --badge-red-text: #a06a6a;
  --badge-yellow-bg: #25201a;
  --badge-yellow-text: #a0906a;
  --badge-purple-bg: #201a25;
  --badge-purple-text: #8a6a9a;
}

/* =============================================
   RESIDENT EVIL THEME
   ============================================= */
[data-theme="residentevil"] {
  --bg-primary: #1a1c1e;
  --bg-secondary: #202225;
  --bg-tertiary: #26292c;
  --bg-elevated: #232628;
  --bg-hover: #2c2f33;
  --bg-active: #35383c;
  --bg-page: #141618;

  --text-primary: #c0c5c8;
  --text-secondary: #909498;
  --text-tertiary: #707478;
  --text-muted: #505458;
  --text-inverse: #1a1c1e;
  --text-link: #d4a020;
  --text-link-hover: #e8b830;

  --border-default: #3a3d42;
  --border-light: #2a2d30;
  --border-strong: #4a4d52;
  --border-focus: #d4a020;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.8);

  --header-bg: linear-gradient(180deg, #1e2022 0%, #141618 100%);
  --header-text: #c0c5c8;
  --header-border: #3a3d42;

  --sidebar-bg: #161819;
  --sidebar-text: #a0a5a8;
  --sidebar-text-muted: #606468;
  --sidebar-hover: #232628;
  --sidebar-active-bg: #d4a020;
  --sidebar-active-text: #141618;
  --sidebar-border: #2a2d30;

  --accent-primary: #d4a020;
  --accent-primary-hover: #e8b830;
  --accent-primary-light: #2a2518;
  --accent-secondary: #c05050;
  --accent-gradient: linear-gradient(135deg, #d4a020 0%, #a07818 100%);

  --success-bg: #1a201a;
  --success-text: #50a050;
  --success-border: #408040;
  --success-solid: #408040;

  --error-bg: #201a1a;
  --error-text: #c05050;
  --error-border: #a04040;
  --error-solid: #a04040;

  --warning-bg: #201c18;
  --warning-text: #d4a020;
  --warning-border: #a07818;
  --warning-solid: #a07818;

  --info-bg: #0d0d1a;
  --info-text: #4a8aff;
  --info-border: #2a4a8b;
  --info-solid: #2a4a8b;

  --btn-primary-bg: #2a7a2a;
  --btn-primary-hover: #3a8a3a;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #1a251a;
  --btn-secondary-hover: #2a352a;
  --btn-secondary-text: #8ab08a;
  --btn-danger-bg: #8b0000;
  --btn-danger-hover: #aa0000;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #1a6a1a;
  --btn-success-hover: #2a8a2a;
  --btn-success-text: #ffffff;

  --input-bg: #0d120d;
  --input-border: #2a3a2a;
  --input-border-hover: #3a4a3a;
  --input-border-focus: #4aff4a;
  --input-text: #a8c5a8;
  --input-placeholder: #5a7a5a;

  --card-bg: #0d120d;
  --card-border: #1a2a1a;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #121812;
  --table-header-text: #8ab08a;
  --table-row-bg: #0d120d;
  --table-row-alt-bg: #101510;
  --table-row-hover: #151d15;
  --table-border: #1a2a1a;

  --modal-overlay: rgba(5, 8, 5, 0.95);
  --modal-bg: #0d120d;
  --modal-border: #2a3a2a;

  --code-bg: #121812;
  --code-text: #4aff4a;
  --code-block-bg: #080b08;
  --code-block-text: #8ab08a;

  --chat-bg: #0d120d;
  --chat-user-bg: #2a7a2a;
  --chat-user-text: #ffffff;
  --chat-assistant-bg: #121812;
  --chat-assistant-text: #a8c5a8;
  --chat-input-bg: #0d120d;
  --chat-input-border: #2a3a2a;

  --badge-default-bg: #121812;
  --badge-default-text: #7a9a7a;
  --badge-blue-bg: #0d0d1a;
  --badge-blue-text: #4a8aff;
  --badge-green-bg: #0d1a0d;
  --badge-green-text: #4aff4a;
  --badge-red-bg: #1a0808;
  --badge-red-text: #ff4a4a;
  --badge-yellow-bg: #1a1508;
  --badge-yellow-text: #ffaa4a;
  --badge-purple-bg: #150d1a;
  --badge-purple-text: #aa4aff;
}

/* =============================================
   ALIEN NOSTROMO THEME
   ============================================= */
[data-theme="nostromo"] {
  --bg-primary: #080a09;
  --bg-secondary: #0a0d0b;
  --bg-tertiary: #0e1210;
  --bg-elevated: #0a0d0b;
  --bg-hover: #121815;
  --bg-active: #182018;
  --bg-page: #040605;

  --text-primary: #90c8a8;
  --text-secondary: #70a080;
  --text-tertiary: #507860;
  --text-muted: #385a45;
  --text-inverse: #080a09;
  --text-link: #40d090;
  --text-link-hover: #60f0b0;

  --border-default: #1a2820;
  --border-light: #121815;
  --border-strong: #2a3a30;
  --border-focus: #40d090;

  --shadow-xs: 0 0 5px rgba(64, 208, 144, 0.25);
  --shadow-sm: 0 0 10px rgba(64, 208, 144, 0.3), 0 2px 4px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 0 20px rgba(64, 208, 144, 0.35), 0 4px 8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 0 30px rgba(64, 208, 144, 0.4), 0 8px 16px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 0 40px rgba(64, 208, 144, 0.45), 0 12px 24px rgba(0, 0, 0, 0.85);

  --header-bg: linear-gradient(180deg, #0a0d0b 0%, #040605 100%);
  --header-text: #90c8a8;
  --header-border: #2a3a30;

  --sidebar-bg: #060807;
  --sidebar-text: #70a080;
  --sidebar-text-muted: #507860;
  --sidebar-hover: #121815;
  --sidebar-active-bg: #1a6040;
  --sidebar-active-text: #b0f0c8;
  --sidebar-border: #1a2820;

  --accent-primary: #30b070;
  --accent-primary-hover: #40d090;
  --accent-primary-light: #0d1810;
  --accent-secondary: #d0a050;
  --accent-gradient: linear-gradient(135deg, #30b070 0%, #208050 100%);

  --success-bg: #0d1a12;
  --success-text: #60f0a0;
  --success-border: #30b070;
  --success-solid: #30b070;

  --error-bg: #1a0d0d;
  --error-text: #d05050;
  --error-border: #a03030;
  --error-solid: #a03030;

  --warning-bg: #1a1508;
  --warning-text: #d0a050;
  --warning-border: #a07030;
  --warning-solid: #a07030;

  --info-bg: #0d1218;
  --info-text: #4080c0;
  --info-border: #205080;
  --info-solid: #205080;

  --btn-primary-bg: #186028;
  --btn-primary-hover: #208038;
  --btn-primary-text: #c0ffc8;
  --btn-secondary-bg: #151a1d;
  --btn-secondary-hover: #1a2025;
  --btn-secondary-text: #80a088;
  --btn-danger-bg: #801818;
  --btn-danger-hover: #a02020;
  --btn-danger-text: #ffc0c0;
  --btn-success-bg: #106020;
  --btn-success-hover: #188030;
  --btn-success-text: #c0ffc8;

  --input-bg: #0d1012;
  --input-border: #2a352d;
  --input-border-hover: #3a4540;
  --input-border-focus: #20c040;
  --input-text: #a0b5a8;
  --input-placeholder: #506858;

  --card-bg: #0d1012;
  --card-border: #1a2520;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #121518;
  --table-header-text: #80a088;
  --table-row-bg: #0d1012;
  --table-row-alt-bg: #101315;
  --table-row-hover: #151a1d;
  --table-border: #1a2520;

  --modal-overlay: rgba(5, 7, 8, 0.95);
  --modal-bg: #0d1012;
  --modal-border: #2a352d;

  --code-bg: #121518;
  --code-text: #20c040;
  --code-block-bg: #080a0c;
  --code-block-text: #80a088;

  --chat-bg: #0d1012;
  --chat-user-bg: #186028;
  --chat-user-text: #c0ffc8;
  --chat-assistant-bg: #121518;
  --chat-assistant-text: #a0b5a8;
  --chat-input-bg: #0d1012;
  --chat-input-border: #2a352d;

  --badge-default-bg: #121518;
  --badge-default-text: #708a78;
  --badge-blue-bg: #0d1218;
  --badge-blue-text: #4080c0;
  --badge-green-bg: #0d1a10;
  --badge-green-text: #40e060;
  --badge-red-bg: #1a0d0d;
  --badge-red-text: #e04040;
  --badge-yellow-bg: #1a1508;
  --badge-yellow-text: #e0a040;
  --badge-purple-bg: #150d18;
  --badge-purple-text: #a060c0;
}

/* =============================================
   BLADE RUNNER 2049 THEME
   ============================================= */
[data-theme="bladerunner"] {
  --bg-primary: #0a0e12;
  --bg-secondary: #0e1218;
  --bg-tertiary: #141c24;
  --bg-elevated: #101620;
  --bg-hover: #182028;
  --bg-active: #202830;
  --bg-page: #080c10;

  --text-primary: #90b8c8;
  --text-secondary: #70a0b0;
  --text-tertiary: #506070;
  --text-muted: #405060;
  --text-inverse: #0a0e12;
  --text-link: #80b8c8;
  --text-link-hover: #a0d0e0;

  --border-default: #304050;
  --border-light: #202830;
  --border-strong: #405060;
  --border-focus: #70a0b0;

  --shadow-xs: 0 0 4px rgba(112, 160, 176, 0.15);
  --shadow-sm: 0 0 8px rgba(112, 160, 176, 0.2), 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 16px rgba(112, 160, 176, 0.25), 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 0 24px rgba(112, 160, 176, 0.3), 0 8px 16px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 0 32px rgba(112, 160, 176, 0.35), 0 12px 24px rgba(0, 0, 0, 0.8);

  --header-bg: linear-gradient(180deg, #101620 0%, #080c10 100%);
  --header-text: #90b8c8;
  --header-border: #304050;

  --sidebar-bg: #080c10;
  --sidebar-text: #80a8b8;
  --sidebar-text-muted: #506070;
  --sidebar-hover: #141c24;
  --sidebar-active-bg: #304860;
  --sidebar-active-text: #c0e0f0;
  --sidebar-border: #253040;

  --accent-primary: #508090;
  --accent-primary-hover: #60a0b0;
  --accent-primary-light: #101820;
  --accent-secondary: #d08020;
  --accent-gradient: linear-gradient(135deg, #508090 0%, #406070 100%);

  --success-bg: #0d1a18;
  --success-text: #60a080;
  --success-border: #408060;
  --success-solid: #408060;

  --error-bg: #1a1010;
  --error-text: #c06060;
  --error-border: #804040;
  --error-solid: #804040;

  --warning-bg: #1a1508;
  --warning-text: #d08020;
  --warning-border: #a06010;
  --warning-solid: #a06010;

  --info-bg: #0d1218;
  --info-text: #70a0b0;
  --info-border: #406070;
  --info-solid: #406070;

  --btn-primary-bg: #406070;
  --btn-primary-hover: #508090;
  --btn-primary-text: #c0e0f0;
  --btn-secondary-bg: #141c24;
  --btn-secondary-hover: #1c2430;
  --btn-secondary-text: #80a8b8;
  --btn-danger-bg: #803030;
  --btn-danger-hover: #a04040;
  --btn-danger-text: #f0c0c0;
  --btn-success-bg: #306050;
  --btn-success-hover: #408060;
  --btn-success-text: #c0f0d8;

  --input-bg: #0e1218;
  --input-border: #304050;
  --input-border-hover: #405060;
  --input-border-focus: #70a0b0;
  --input-text: #90b8c8;
  --input-placeholder: #506070;

  --card-bg: #0e1218;
  --card-border: #253040;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #101620;
  --table-header-text: #80a8b8;
  --table-row-bg: #0e1218;
  --table-row-alt-bg: #101418;
  --table-row-hover: #141c24;
  --table-border: #253040;

  --modal-overlay: rgba(8, 12, 16, 0.9);
  --modal-bg: #101620;
  --modal-border: #304050;

  --code-bg: #141c24;
  --code-text: #80b8c8;
  --code-block-bg: #080c10;
  --code-block-text: #80a8b8;

  --chat-bg: #0e1218;
  --chat-user-bg: #406070;
  --chat-user-text: #c0e0f0;
  --chat-assistant-bg: #141c24;
  --chat-assistant-text: #90b8c8;
  --chat-input-bg: #0e1218;
  --chat-input-border: #304050;

  --badge-default-bg: #141c24;
  --badge-default-text: #70a0b0;
  --badge-blue-bg: #102030;
  --badge-blue-text: #70a0c0;
  --badge-green-bg: #0d1a18;
  --badge-green-text: #60a080;
  --badge-red-bg: #1a1010;
  --badge-red-text: #c06060;
  --badge-yellow-bg: #1a1508;
  --badge-yellow-text: #d08020;
  --badge-purple-bg: #151020;
  --badge-purple-text: #8070b0;
}

/* =============================================
   HACKERS 1995 THEME
   ============================================= */
[data-theme="hackers95"] {
  --bg-primary: #040608;
  --bg-secondary: #080a0e;
  --bg-tertiary: #0c1014;
  --bg-elevated: #080a0e;
  --bg-hover: #101418;
  --bg-active: #141820;
  --bg-page: #020304;

  --text-primary: #7fdbdb;
  --text-secondary: #5ab8b8;
  --text-tertiary: #3a9898;
  --text-muted: #2a7878;
  --text-inverse: #040608;
  --text-link: #00d4d4;
  --text-link-hover: #40e8e8;

  --border-default: #1a2830;
  --border-light: #101820;
  --border-strong: #2a3840;
  --border-focus: #00d4d4;

  --shadow-xs: 0 0 4px rgba(0, 212, 212, 0.3);
  --shadow-sm: 0 0 10px rgba(0, 212, 212, 0.35), 0 0 20px rgba(80, 60, 180, 0.15);
  --shadow-md: 0 0 20px rgba(0, 212, 212, 0.4), 0 0 40px rgba(80, 60, 180, 0.2);
  --shadow-lg: 0 0 30px rgba(0, 212, 212, 0.45), 0 0 60px rgba(80, 60, 180, 0.25);
  --shadow-xl: 0 0 40px rgba(0, 212, 212, 0.5), 0 0 80px rgba(80, 60, 180, 0.3);

  --header-bg: linear-gradient(180deg, #080a0e 0%, #040608 100%);
  --header-text: #7fdbdb;
  --header-border: #1a3040;

  --sidebar-bg: #040608;
  --sidebar-text: #5ab8b8;
  --sidebar-text-muted: #3a9898;
  --sidebar-hover: #101418;
  --sidebar-active-bg: #00a0a0;
  --sidebar-active-text: #000000;
  --sidebar-border: #1a2830;

  --accent-primary: #00b8b8;
  --accent-primary-hover: #00d4d4;
  --accent-primary-light: #081418;
  --accent-secondary: #6050b0;
  --accent-gradient: linear-gradient(135deg, #00d4d4 0%, #6050b0 100%);

  --success-bg: #081810;
  --success-text: #00d4a0;
  --success-border: #00a080;
  --success-solid: #00a080;

  --error-bg: #180810;
  --error-text: #d45050;
  --error-border: #a03030;
  --error-solid: #a03030;

  --warning-bg: #181408;
  --warning-text: #d4a040;
  --warning-border: #a08030;
  --warning-solid: #a08030;

  --info-bg: #081018;
  --info-text: #4080d4;
  --info-border: #3060a0;
  --info-solid: #3060a0;

  --btn-primary-bg: #00a0a0;
  --btn-primary-hover: #00b8b8;
  --btn-primary-text: #000000;
  --btn-secondary-bg: #101418;
  --btn-secondary-hover: #141820;
  --btn-secondary-text: #5ab8b8;
  --btn-danger-bg: #a03030;
  --btn-danger-hover: #c04040;
  --btn-danger-text: #ffffff;
  --btn-success-bg: #00806a;
  --btn-success-hover: #00a080;
  --btn-success-text: #000000;

  --input-bg: #080a0e;
  --input-border: #2a3840;
  --input-border-hover: #3a4850;
  --input-border-focus: #00d4d4;
  --input-text: #7fdbdb;
  --input-placeholder: #3a9898;

  --card-bg: #080a0e;
  --card-border: #1a2830;
  --card-shadow: var(--shadow-sm);
  --card-hover-shadow: var(--shadow-md);

  --table-header-bg: #0c1014;
  --table-header-text: #5ab8b8;
  --table-row-bg: #080a0e;
  --table-row-alt-bg: #0a0c10;
  --table-row-hover: #101418;
  --table-border: #1a2830;

  --modal-overlay: rgba(2, 3, 4, 0.95);
  --modal-bg: #080a0e;
  --modal-border: #00d4d4;

  --code-bg: #0c1014;
  --code-text: #00d4d4;
  --code-block-bg: #040608;
  --code-block-text: #5ab8b8;

  --chat-bg: #080a0e;
  --chat-user-bg: #00a0a0;
  --chat-user-text: #000000;
  --chat-assistant-bg: #0c1014;
  --chat-assistant-text: #7fdbdb;
  --chat-input-bg: #080a0e;
  --chat-input-border: #2a3840;

  --badge-default-bg: #101418;
  --badge-default-text: #5ab8b8;
  --badge-blue-bg: #081018;
  --badge-blue-text: #4080d4;
  --badge-green-bg: #081810;
  --badge-green-text: #00d4a0;
  --badge-red-bg: #180810;
  --badge-red-text: #d45050;
  --badge-yellow-bg: #181408;
  --badge-yellow-text: #d4a040;
  --badge-purple-bg: #100818;
  --badge-purple-text: #8060d4;
}

/* =============================================
   BASE STYLES
   ============================================= */

/* Body */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App container */
.app-layout,
.app-container,
#app-container {
  background-color: var(--bg-secondary);
}

/* =============================================
   TYPOGRAPHY
   ============================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.8125rem; }

p {
  color: var(--text-secondary);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--text-link-hover);
}

small, .text-small {
  font-size: 0.75rem;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* =============================================
   LAYOUT COMPONENTS
   ============================================= */

.main-content-area,
.main-content,
#main-content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.sidebar {
  background-color: var(--sidebar-bg);
}

.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1,
.page-header h2 {
  color: var(--text-primary);
}

/* =============================================
   CARDS
   ============================================= */

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: var(--card-hover-shadow);
}

.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}

.card-header h3,
.card-header h4 {
  color: var(--text-primary);
  font-weight: 600;
}

.card-content,
.card-body {
  padding: var(--space-5);
}

.card-footer,
.card-actions {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-default);
}

/* =============================================
   BUTTONS
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--border-default);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-hover);
  color: var(--text-primary);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-bg);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--btn-danger-hover);
  border-color: var(--btn-danger-hover);
}

.btn-success {
  background-color: var(--btn-success-bg);
  color: var(--btn-success-text);
  border-color: var(--btn-success-bg);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--btn-success-hover);
  border-color: var(--btn-success-hover);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================
   FORM ELEMENTS
   ============================================= */

input,
textarea,
select,
.form-input,
.form-select,
.form-textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--input-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  height: 40px;
  padding: 0 var(--space-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

textarea,
.form-textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--input-border-hover);
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--input-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-primary-light);
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder {
  color: var(--input-placeholder);
}

label {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-2);
}

/* =============================================
   TABLES
   ============================================= */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--card-bg);
}

th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--table-border);
}

td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  border-bottom: 1px solid var(--table-border);
  font-size: 0.875rem;
}

tbody tr:hover td {
  background-color: var(--table-row-hover);
}

/* =============================================
   BADGES & TAGS
   ============================================= */

.badge,
.tag,
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--badge-default-bg);
  color: var(--badge-default-text);
}

.badge-success,
.badge-green {
  background-color: var(--badge-green-bg);
  color: var(--badge-green-text);
}

.badge-error,
.badge-danger,
.badge-red {
  background-color: var(--badge-red-bg);
  color: var(--badge-red-text);
}

.badge-warning,
.badge-yellow {
  background-color: var(--badge-yellow-bg);
  color: var(--badge-yellow-text);
}

.badge-info,
.badge-blue {
  background-color: var(--badge-blue-bg);
  color: var(--badge-blue-text);
}

.badge-purple {
  background-color: var(--badge-purple-bg);
  color: var(--badge-purple-text);
}

/* =============================================
   MODALS
   ============================================= */

.modal-overlay {
  background-color: var(--modal-overlay);
  backdrop-filter: blur(4px);
}

.modal,
.modal-content {
  background-color: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.modal-header h3,
.modal-header h4 {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-6);
  color: var(--text-primary);
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-default);
}

/* =============================================
   CODE BLOCKS
   ============================================= */

code {
  background-color: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-code);
  font-size: 0.8125rem;
}

pre {
  background-color: var(--code-block-bg);
  color: var(--code-block-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  line-height: 1.6;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.code-preview {
  background-color: var(--bg-tertiary);
  border-color: var(--border-default);
}

.code-preview pre {
  background-color: var(--code-block-bg);
  color: var(--code-block-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin: 0;
}

.code-preview pre code,
.code-preview code {
  color: var(--code-block-text);
  background: transparent;
  font-family: var(--font-code);
}

.test-code-preview pre.code-preview {
  background: var(--code-block-bg);
  color: var(--code-block-text);
}

.test-code-preview pre.code-preview code {
  color: var(--code-block-text);
}

/* =============================================
   ALERTS & NOTIFICATIONS
   ============================================= */

.alert,
.notification {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
}

.alert-success,
.notification.success {
  background-color: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.alert-error,
.notification.error {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.alert-warning,
.notification.warning {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.alert-info,
.notification.info {
  background-color: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* =============================================
   EMPTY STATES
   ============================================= */

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.empty-state h3 {
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

/* =============================================
   LOADING STATES
   ============================================= */

.spinner {
  border: 3px solid var(--border-default);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes qmax-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* =============================================
   SCROLLBARS
   ============================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* =============================================
   THEME TOGGLE
   ============================================= */

.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: color 0.15s ease, background-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.theme-toggle:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

/* Dark mode (default): show moon icon */
:root .theme-toggle .icon-moon {
  display: flex;
  align-items: center;
}

/* Light mode: show sun icon */
[data-theme="light"] .theme-toggle .icon-sun {
  display: flex;
  align-items: center;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

/* =============================================
   CHAT WIDGET OVERRIDES
   ============================================= */

.qualitymax-chat-container {
  background-color: var(--chat-bg);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xl);
}

.chat-messages {
  background-color: var(--bg-secondary);
}

.message.user {
  background-color: var(--chat-user-bg);
  color: var(--chat-user-text);
}

.message.assistant {
  background-color: var(--chat-assistant-bg);
  color: var(--chat-assistant-text);
}

.chat-input-container {
  background-color: var(--chat-bg);
  border-color: var(--border-default);
}

.chat-input {
  background-color: var(--chat-input-bg);
  border-color: var(--chat-input-border);
  color: var(--text-primary);
}

.welcome-message,
.welcome-content {
  color: var(--text-primary);
}

.welcome-content h4 {
  color: var(--text-primary);
}

.welcome-content p,
.welcome-content li {
  color: var(--text-secondary);
}

.example-prompt {
  background-color: var(--info-bg);
  color: var(--info-text);
}

/* =============================================
   ADDITIONAL COMPONENT OVERRIDES
   ============================================= */

/* Filters and toolbars */
.filter-bar,
.toolbar,
.action-bar {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* List items */
.list-item {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color 0.15s ease;
}

.list-item:hover {
  border-color: var(--border-strong);
}

/* Tabs */
.tab-btn {
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--text-primary);
}

.tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  transition: background-color 0.15s ease;
}

.dropdown-item:hover {
  background-color: var(--bg-hover);
}

/* Section dividers */
.divider {
  height: 1px;
  background-color: var(--border-default);
  margin: var(--space-6) 0;
}

/* Form sections */
.form-section,
.settings-section {
  background-color: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.form-section h3,
.settings-section h3 {
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Script/code preview areas */
.script-info-bar,
.editor-main-centered {
  background-color: var(--card-bg);
  border-color: var(--border-default);
}

.editor-toolbar {
  background-color: var(--bg-tertiary);
  border-color: var(--border-default);
}

.code-editor-textarea,
.code-editor-textarea-full {
  background-color: var(--code-block-bg);
  color: var(--code-block-text);
  font-family: var(--font-code);
}

.code-preview-panel,
.code-preview-panel-full {
  background-color: var(--bg-tertiary);
  border-color: var(--border-default);
}

/* Info badges and stat items */
.info-badge,
.stat-badge {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
}

/* Health and insight items */
.insight-item,
.health-item {
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.insight-text,
.health-label {
  color: var(--text-primary);
}

/* Billing cards */
.billing-card {
  background-color: var(--card-bg);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.billing-card h3,
.billing-card > div {
  color: var(--text-primary);
}

.billing-card ul li {
  color: var(--text-secondary, var(--text-primary));
}

.billing-card-title {
  color: var(--text-primary);
}

.billing-card-value {
  color: var(--text-primary);
}

.billing-card-sub,
.billing-muted {
  color: var(--text-muted);
}

/* Repository Analysis card — dark theme */
.ra-card {
  background: var(--bg-secondary);
  border-color: var(--border-default);
}
.ra-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-color: var(--border-default);
}
.ra-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ra-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
}
.ra-dropdown-menu {
  background: var(--bg-secondary);
  border-color: var(--border-default);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.ra-dropdown-item:hover {
  background: var(--bg-tertiary);
}
.ra-skel {
  background: var(--bg-tertiary);
}

/* Styled checkbox + pill group — dark theme overrides */
input.qm-checkbox,
input.qm-checkbox[type="checkbox"] {
  border-color: var(--text-tertiary);
  background-color: transparent;
}
input.qm-checkbox:checked,
input.qm-checkbox[type="checkbox"]:checked {
  background: var(--accent-primary);
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.cat-pill-group {
  border-color: var(--border-default);
}
.cat-pill-group label {
  border-color: var(--border-default);
  color: var(--text-secondary);
}
.cat-pill-group label:hover {
  background: var(--bg-tertiary);
}

/* =============================================
   TOS Modal Styles (theme-aware)
   ============================================= */
.tos-modal-content {
  background: var(--modal-bg);
  border-color: var(--border-default);
}

.tos-modal-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.tos-section {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.tos-header h2,
.tos-header h3 {
  color: var(--text-primary);
}

.tos-description {
  color: var(--text-secondary);
}

.tos-section-content p,
.tos-section-content li {
  color: var(--text-secondary);
}

.tos-label {
  color: var(--text-secondary);
}

.tos-label strong {
  color: var(--text-primary);
}

.tos-text {
  color: var(--text-secondary);
}

.tos-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.tos-warning .warning-text,
.warning-text {
  color: var(--warning-text);
}

.tos-warning strong {
  color: var(--warning-text);
}

.tos-button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.tos-button:hover {
  background: var(--btn-primary-hover);
}

.tos-checkbox-label {
  color: var(--text-primary);
}

.tos-checkbox-label a {
  color: var(--accent-primary);
}

.tos-subtitle {
  color: var(--text-tertiary);
}

.tos-link {
  color: var(--accent-primary);
}

/* TOS Settings Modal / Consent Items */
.tos-settings-content {
  background: var(--modal-bg);
}

.consent-item {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.consent-link {
  color: var(--accent-primary);
}

.consent-note {
  background: var(--bg-tertiary);
  border-left-color: var(--accent-primary);
}

.consent-note small {
  color: var(--text-secondary);
}

/* Create Test Case Form */
.create-test-case-form label {
  color: var(--text-primary);
}

.create-test-case-form .label-hint {
  color: var(--text-tertiary);
}

.selected-project-display {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.selected-project-display .project-badge {
  color: var(--text-primary);
}

.selected-project-display .project-key {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Export modal */
.export-modal-content {
  background: var(--modal-bg);
  border-color: var(--border-default);
}

.export-modal-header {
  background: var(--bg-tertiary);
}

.export-modal-header h3 {
  color: var(--text-primary);
}

.export-modal-close {
  color: var(--text-secondary);
}

.export-modal-close:hover {
  color: var(--text-primary);
}

.export-modal-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.export-option {
  background: var(--bg-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.export-option:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.export-label {
  color: var(--text-primary);
}

.export-desc {
  color: var(--text-secondary);
}

/* =============================================
   REDUCED MOTION
   When the user has prefers-reduced-motion: reduce, override
   the motion tokens so every component built on top of
   var(--transition-*) and var(--duration-*) becomes instant
   without each component opting in individually.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --transition-fast: 0ms linear;
    --transition-base: 0ms linear;
    --transition-slow: 0ms linear;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
   ADDITIONAL PROFILE THEMES
   The sessions graph consumes the map tokens below, while the rest of the
   application uses the shared semantic tokens. Keeping both on the selected
   profile makes System mode correctly switch to the chosen light style.
   ============================================= */
[data-theme="paper"] {
  --bg-primary: #f5f2ea;
  --bg-secondary: #eee8dd;
  --bg-tertiary: #e2dacb;
  --bg-elevated: #fffdf7;
  --bg-hover: #e8e0d2;
  --bg-active: #d9cfbd;
  --bg-page: #f5f2ea;
  --text-primary: #3b2f1a;
  --text-secondary: #6b5d45;
  --text-tertiary: #8a7a5c;
  --text-muted: #a89878;
  --text-inverse: #fffdf7;
  --text-link: #a14f08;
  --text-link-hover: #c26816;
  --border-default: #e6e0d2;
  --border-light: #f0eadf;
  --border-strong: #d6cdbb;
  --border-focus: #b45309;
  --accent-primary: #b45309;
  --accent-primary-hover: #d97706;
  --accent-primary-light: rgba(180, 83, 9, 0.12);
  --accent-secondary: #d97706;
  --accent-gradient: linear-gradient(135deg, #b45309, #d97706);
}

[data-theme="arctic"] {
  --bg-primary: #eef4f9;
  --bg-secondary: #e3edf5;
  --bg-tertiary: #d5e4ef;
  --bg-elevated: #ffffff;
  --bg-hover: #dce9f2;
  --bg-active: #c7dae8;
  --bg-page: #eef4f9;
  --text-primary: #0c2436;
  --text-secondary: #3f5b6e;
  --text-tertiary: #6b8298;
  --text-muted: #93a9ba;
  --text-inverse: #ffffff;
  --text-link: #0276b3;
  --text-link-hover: #0284c7;
  --border-default: #d3e2ee;
  --border-light: #e3edf5;
  --border-strong: #bcd2e2;
  --border-focus: #0284c7;
  --accent-primary: #0284c7;
  --accent-primary-hover: #0ea5e9;
  --accent-primary-light: rgba(2, 132, 199, 0.12);
  --accent-secondary: #0ea5e9;
  --accent-gradient: linear-gradient(135deg, #0284c7, #0ea5e9);
}

[data-theme="bubblegum"] {
  --bg-primary: #fdf0f7;
  --bg-secondary: #f9e5f0;
  --bg-tertiary: #f4d5e6;
  --bg-elevated: #fff8fc;
  --bg-hover: #f8dfed;
  --bg-active: #efc7db;
  --bg-page: #fdf0f7;
  --text-primary: #500724;
  --text-secondary: #9d174d;
  --text-tertiary: #be6b93;
  --text-muted: #d499b8;
  --text-inverse: #ffffff;
  --text-link: #be185d;
  --text-link-hover: #db2777;
  --border-default: #f6cfe4;
  --border-light: #fbe7f2;
  --border-strong: #efb8d5;
  --border-focus: #db2777;
  --accent-primary: #db2777;
  --accent-primary-hover: #ec4899;
  --accent-primary-light: rgba(219, 39, 119, 0.12);
  --accent-secondary: #a855f7;
  --accent-gradient: linear-gradient(135deg, #db2777, #a855f7);
}

[data-theme="meadow"] {
  --bg-primary: #eefaf0;
  --bg-secondary: #e2f3e6;
  --bg-tertiary: #d0e9d7;
  --bg-elevated: #fafffb;
  --bg-hover: #daf0df;
  --bg-active: #bedfc8;
  --bg-page: #eefaf0;
  --text-primary: #052e16;
  --text-secondary: #166534;
  --text-tertiary: #4d8c60;
  --text-muted: #7bad89;
  --text-inverse: #ffffff;
  --text-link: #15803d;
  --text-link-hover: #16a34a;
  --border-default: #c9ecd3;
  --border-light: #ddf4e3;
  --border-strong: #addbbe;
  --border-focus: #16a34a;
  --accent-primary: #16a34a;
  --accent-primary-hover: #22c55e;
  --accent-primary-light: rgba(22, 163, 74, 0.12);
  --accent-secondary: #65a30d;
  --accent-gradient: linear-gradient(135deg, #16a34a, #65a30d);
}

:is([data-theme="paper"], [data-theme="arctic"], [data-theme="bubblegum"], [data-theme="meadow"]) {
  --header-bg: var(--bg-elevated);
  --header-text: var(--text-primary);
  --header-border: var(--border-default);
  --sidebar-bg: var(--bg-secondary);
  --sidebar-text: var(--text-secondary);
  --sidebar-text-muted: var(--text-muted);
  --sidebar-hover: var(--bg-tertiary);
  --sidebar-active-bg: var(--accent-primary-light);
  --sidebar-active-text: var(--accent-primary);
  --sidebar-border: var(--border-default);
  --success-bg: #dcfce7;
  --success-text: #166534;
  --success-border: #86efac;
  --success-solid: #22c55e;
  --error-bg: #fee2e2;
  --error-text: #991b1b;
  --error-border: #fca5a5;
  --error-solid: #ef4444;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --warning-border: #fcd34d;
  --warning-solid: #f59e0b;
  --info-bg: var(--accent-primary-light);
  --info-text: var(--accent-primary);
  --info-border: color-mix(in srgb, var(--accent-primary) 42%, white);
  --info-solid: var(--accent-primary);
  --btn-primary-bg: var(--accent-primary);
  --btn-primary-hover: var(--accent-primary-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-hover: var(--bg-tertiary);
  --btn-secondary-text: var(--text-secondary);
  --input-bg: var(--bg-elevated);
  --input-border: var(--border-strong);
  --input-border-hover: var(--text-muted);
  --input-border-focus: var(--accent-primary);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-muted);
  --card-bg: var(--bg-elevated);
  --card-border: var(--border-default);
  --card-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 9%, transparent);
  --card-hover-shadow: 0 6px 18px color-mix(in srgb, var(--accent-primary) 14%, transparent);
  --table-header-bg: var(--bg-secondary);
  --table-header-text: var(--text-tertiary);
  --table-row-bg: var(--bg-elevated);
  --table-row-alt-bg: var(--bg-secondary);
  --table-row-hover: var(--bg-tertiary);
  --table-border: var(--border-default);
  --modal-bg: var(--bg-elevated);
  --modal-border: var(--border-default);
  --code-bg: var(--bg-secondary);
  --code-text: var(--accent-primary);
  --code-block-bg: var(--bg-primary);
  --code-block-text: var(--text-primary);
  --chat-bg: var(--bg-secondary);
  --chat-user-bg: var(--accent-primary);
  --chat-user-text: #ffffff;
  --chat-assistant-bg: var(--bg-tertiary);
  --chat-assistant-text: var(--text-primary);
  --chat-input-bg: var(--bg-elevated);
  --chat-input-border: var(--border-default);
  --badge-default-bg: var(--bg-tertiary);
  --badge-default-text: var(--text-secondary);
  --badge-blue-bg: var(--accent-primary-light);
  --badge-blue-text: var(--accent-primary);

  /* Repository Atlas and the project-session memory graph. */
  --map-shell-bg: var(--bg-primary);
  --map-shell-glow-1: color-mix(in srgb, var(--accent-primary) 18%, transparent);
  --map-shell-glow-2: color-mix(in srgb, var(--accent-secondary) 13%, transparent);
  --map-shell-border: var(--border-default);
  --map-text: var(--text-primary);
  --map-text-strong: var(--text-primary);
  --map-text-secondary: var(--text-secondary);
  --map-text-tertiary: var(--text-tertiary);
  --map-kicker: var(--accent-primary);
  --map-violet: var(--accent-secondary);
  --map-cyan: var(--accent-primary);
  --map-green: var(--success-solid);
  --map-card-bg: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  --map-card-border: var(--border-default);
  --map-track-bg: var(--bg-tertiary);
  --map-progress-glow: color-mix(in srgb, var(--accent-primary) 55%, transparent);
  --map-legend-text: var(--text-secondary);
  --map-legend-btn-bg: var(--accent-primary-light);
  --map-legend-btn-border: color-mix(in srgb, var(--accent-primary) 28%, transparent);
  --map-legend-btn-text: var(--accent-primary);
  --map-fog-dot: var(--text-muted);
  --map-canvas-border: var(--border-default);
  --map-canvas-bg: var(--bg-primary);
  --map-canvas-glow: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
  --map-grid-line: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --map-stage-label: var(--text-secondary);
  --map-stage-count: var(--text-tertiary);
  --map-edge: color-mix(in srgb, var(--text-secondary) 36%, transparent);
  --map-edge-grounded: var(--accent-primary);
  --map-node-bg: var(--bg-elevated);
  --map-node-border: var(--border-default);
  --map-node-hover-bg: var(--bg-secondary);
  --map-node-hover-glow: color-mix(in srgb, var(--accent-primary) 32%, transparent);
  --map-node-dot: var(--text-muted);
  --map-node-dot-repository: var(--text-primary);
  --map-node-label: var(--text-primary);
  --map-node-meta: var(--text-tertiary);
  --map-inspector-bg: var(--bg-elevated);
  --map-inspector-border: var(--border-default);
  --map-code-text: var(--accent-primary);
  --map-code-bg: var(--bg-secondary);
}