/* ============================================================================
   TeachQuest - Custom CSS Framework
   Base Variables & Theming System
   ============================================================================ */

:root {
  /* ========== COLOR PALETTE ========== */
  /* TeachQuest Brand Colors (CRITICAL) */
  --color-brand-teach: #7C73FF;       /* Teach (Purple) - Primary brand color */
  --color-brand-quest: #FF6B6B;       /* Quest (Red) - Secondary brand color */

  /* Primary Colors - RPG/Education Themed */
  --color-primary: #7C73FF;           /* TeachQuest Teach - Main action color */
  --color-primary-dark: #6B63E0;      /* Darker purple */
  --color-primary-light: #8E8AFF;     /* Lighter purple */
  --color-primary-text: #7C73FF;      /* Purple labels/headings on surfaces */

  --color-secondary: #FF6B6B;         /* TeachQuest Quest - Accent/rewards */
  --color-secondary-dark: #E85555;    /* Darker red */
  --color-secondary-light: #FF8585;   /* Lighter red */

  --color-success: #10b981;           /* Green - Success/achievements */
  --color-success-dark: #059669;      /* Darker green */
  --color-success-light: #6ee7b7;     /* Lighter green */

  --color-danger: #ef4444;            /* Red - Danger/damage */
  --color-danger-dark: #dc2626;       /* Darker red */
  --color-danger-light: #fca5a5;      /* Lighter red */

  --color-warning: #f97316;           /* Orange - Warning/curses */
  --color-warning-dark: #ea580c;      /* Darker orange */
  --color-warning-light: #fed7aa;     /* Lighter orange */

  --color-info: #0ea5e9;              /* Sky - Info/notifications */
  --color-info-dark: #0284c7;         /* Darker sky */
  --color-info-light: #7dd3fc;        /* Lighter sky */

  /* Light Theme - Bright & Colorful */
  --color-background: #ffffff;        /* White background */
  --color-background-alt: #f9fafb;    /* Very light gray */
  --color-background-secondary: #f3f4f6; /* Light gray */
  --color-page-bg: #f5f5f5;          /* App shell / page background */
  --color-header-bg: #ffffff;
  --color-header-shadow: rgba(0, 0, 0, 0.1);
  --color-brand-hover-bg: #f5f3ff;
  --color-input-bg: #ffffff;
  --color-input-text: #1f2937;
  --color-input-border: #e0e0e0;
  --color-modal-bg: #ffffff;
  --color-modal-surface: #f9fafb;

  --color-surface: #ffffff;           /* Card/panel backgrounds */
  --color-surface-hover: #f9fafb;     /* Surface on hover */
  --color-surface-active: #f3f4f6;    /* Surface when active */

  --color-border: #e5e7eb;            /* Light borders */
  --color-border-dark: #d1d5db;       /* Darker borders */

  --color-text: #1f2937;              /* Dark text - primary */
  --color-text-secondary: #6b7280;    /* Gray text - secondary */
  --color-text-light: #9ca3af;        /* Light gray text - tertiary */
  --color-text-inverse: #ffffff;      /* White text for dark backgrounds */
  --color-on-primary: #ffffff;        /* Text/icons on brand buttons */
  --color-on-danger: #ffffff;

  /* Selection / highlight (lists, tabs, unread rows) */
  --color-selection-bg: #f0ebff;
  --color-selection-hover: #f8f7ff;
  --color-selection-muted: #ede9fe;

  /* Light modal shells (raids, confirm, student mgmt) */
  --color-modal-shell-start: #faf8ff;
  --color-modal-shell-end: #f1efff;
  --color-modal-shell-header: rgba(255, 255, 255, 0.65);
  --color-modal-shell-border: rgba(124, 115, 255, 0.35);

  /* Classroom tools (timer, randomizer, dice, noise tracker setup) */
  --color-tool-accent: #4338ca;
  --color-tool-accent-icon: #6366f1;
  --color-tool-inset: rgba(255, 255, 255, 0.75);
  --color-tool-inset-strong: rgba(255, 255, 255, 0.9);
  --color-tool-card: rgba(255, 255, 255, 0.78);
  --color-tool-hero-subtext: #4c1d95;
  --color-tool-panel-wash: linear-gradient(
    180deg,
    rgba(247, 247, 255, 0.85) 0%,
    rgba(236, 236, 255, 0.86) 100%
  );
  --color-tool-status-success: #166534;
  --color-tool-status-success-bg: rgba(34, 197, 94, 0.18);

  /* Warning / info banners in modals */
  --color-warning-banner-bg: rgba(245, 158, 11, 0.12);
  --color-warning-banner-text: #92400e;
  --color-warning-banner-border: #f59e0b;

  /* Combat flow modal (damage wizard) */
  --color-combat-shell-start: #fffbfb;
  --color-combat-shell-end: #fef2f2;
  --color-combat-body-bg: rgba(255, 255, 255, 0.55);
  --color-combat-phases-bg: rgba(255, 255, 255, 0.75);
  --color-combat-chip-bg: #fee2e2;
  --color-combat-chip-border: #fca5a5;
  --color-combat-chip-text: #991b1b;
  --color-combat-heading: #111827;
  --color-combat-selection-bg: rgba(254, 226, 226, 0.72);
  --color-combat-selection-border: #f87171;
  --color-combat-selection-ring: rgba(248, 113, 113, 0.28);
  --color-combat-secondary-text: #991b1b;
  --color-combat-secondary-hover-bg: rgba(254, 242, 242, 0.95);
  --color-combat-row-bg: var(--color-surface);
  --color-combat-custom-form-bg: rgba(254, 242, 242, 0.72);
  --color-combat-accent: #b91c1c;
  --color-combat-accent-strong: #991b1b;
  --color-combat-accent-muted: #7f1d1d;

  /* Give reward flow modal (green) */
  --color-reward-shell-start: #fafff6;
  --color-reward-shell-end: #f0fff0;
  --color-reward-border: rgba(16, 185, 129, 0.3);
  --color-reward-selection-bg: rgba(16, 185, 129, 0.15);
  --color-reward-selection-border: #10b981;
  --color-reward-chip-bg: rgba(220, 252, 231, 0.9);
  --color-reward-chip-border: #86efac;
  --color-reward-chip-text: #15803d;
  --color-reward-custom-form-bg: rgba(236, 253, 245, 0.75);
  --color-reward-accent: #059669;

  /* Audit log entry tints */
  --color-audit-combat-bg: linear-gradient(90deg, rgba(254, 243, 199, 0.55) 0%, var(--color-surface) 28%);
  --color-audit-reward-bg: linear-gradient(90deg, rgba(220, 252, 231, 0.55) 0%, var(--color-surface) 28%);
  --color-audit-magic-bg: linear-gradient(90deg, rgba(237, 233, 254, 0.55) 0%, var(--color-surface) 28%);

  /* Header toolbar icon buttons */
  --color-toolbar-btn-bg: transparent;
  --color-toolbar-btn-icon: #64748b;
  --color-toolbar-btn-hover-bg: rgba(15, 23, 42, 0.06);
  --color-toolbar-btn-active-bg: var(--color-primary);
  --color-toolbar-btn-active-icon: #ffffff;
  --color-toolbar-divider: rgba(15, 23, 42, 0.12);

  --color-accent-chip-bg: var(--color-surface);
  --color-accent-chip-text: var(--color-text-secondary);
  --color-accent-chip-border: var(--color-primary-light);

  /* Aliases used by Modal.js and legacy sheets */
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --color-light-gray: var(--color-border);
  --color-gray: var(--color-text-light);

  /* Special Colors - Stats */
  --color-hp: #ef4444;                /* Red - Hit Points */
  --color-mp: #0ea5e9;                /* Blue - Mana Points */
  --color-xp: #10b981;                /* Green - Experience Points */
  --color-gp: #f59e0b;                /* Gold - Gold Points */

  /* Class Colors - CRITICAL VISUAL IDENTITY */
  --color-class-defender: #ef4444;    /* Red - Tank/Protection class */
  --color-class-wizard: #0ea5e9;      /* Blue - Damage/Magic class */
  --color-class-healer: #10b981;      /* Green - Support/Restoration class */
  --color-class-tinkerer: #f59e0b;   /* Gold - Buffer/Enhancement class */

  /* ========== SPACING ========== */
  --spacing-xs: 0.25rem;              /* 4px */
  --spacing-sm: 0.5rem;               /* 8px */
  --spacing-md: 1rem;                 /* 16px */
  --spacing-lg: 1.5rem;               /* 24px */
  --spacing-xl: 2rem;                 /* 32px */
  --spacing-2xl: 3rem;                /* 48px */
  --spacing-3xl: 4rem;                /* 64px */

  /* ========== TYPOGRAPHY ========== */
  /* Font Families */
  --font-display: 'Fredoka One', cursive;     /* RPG titles */
  --font-body: 'Nunito', sans-serif;          /* Body text */
  --font-mono: 'JetBrains Mono', monospace;   /* Code */

  /* Font Sizes */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 2rem;              /* 32px */
  --font-size-4xl: 2.5rem;            /* 40px */
  --font-size-5xl: 3rem;              /* 48px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --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);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* RPG-style glow shadow */
  --shadow-glow: 0 0 10px rgba(99, 102, 241, 0.3);
  --shadow-glow-success: 0 0 10px rgba(16, 185, 129, 0.3);
  --shadow-glow-danger: 0 0 10px rgba(239, 68, 68, 0.3);

  /* ========== BORDER RADIUS ========== */
  --radius-none: 0;
  --radius-sm: 0.25rem;               /* 4px */
  --radius-md: 0.375rem;              /* 6px */
  --radius-lg: 0.5rem;                /* 8px */
  --radius-xl: 0.75rem;               /* 12px */
  --radius-2xl: 1rem;                 /* 16px */
  --radius-full: 9999px;              /* Full round */

  /* ========== TRANSITIONS ========== */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-INDEX ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  /* Above #modal-container (13050); below custom confirm overlays (20500) */
  --z-dm-row-tooltip: 13650;

  /* ========== MODAL/DIALOG COLORS ========== */
  /* Custom confirmation dialogs (NEVER use native alert/confirm) */
  --modal-confirm-primary: var(--color-brand-teach);      /* TeachQuest Teach - Yes/Confirm */
  --modal-confirm-secondary: var(--color-brand-quest);    /* TeachQuest Quest - No/Cancel */
  --modal-danger: var(--color-danger);                    /* Red - Dangerous actions */
  --modal-success: var(--color-success);                  /* Green - Success confirmation */
  --modal-backdrop: rgba(0, 0, 0, 0.5);                   /* Semi-transparent black */

  /* Data-management modal palette (light) */
  --color-dm-bg-start: #1a1a2e;
  --color-dm-bg-end: #16213e;
  --color-dm-border: #7C73FF;

  /* Data-management table view */
  --dm-table-surface: #ffffff;
  --dm-table-header-bg: #ede9fe;
  --dm-table-header-text: #4338ca;
  --dm-table-border: rgba(124, 115, 255, 0.22);
  --dm-table-row-hover: #f5f3ff;
  --dm-table-row-zebra: #faf8ff;
  --dm-table-text: #1f2937;
  --dm-table-text-muted: #6b7280;
  --dm-table-name-text: #111827;
  --dm-layout-toggle-bg: rgba(124, 115, 255, 0.08);
  --dm-layout-toggle-border: rgba(124, 115, 255, 0.35);
  --dm-layout-btn-text: #6b7280;
  --dm-layout-btn-active-bg: #7C73FF;
  --dm-layout-btn-active-text: #ffffff;
  --dm-tooltip-bg: linear-gradient(145deg, #ffffff 0%, #f5f3ff 100%);
  --dm-tooltip-border: rgba(124, 115, 255, 0.4);
  --dm-tooltip-text: #1f2937;
  --dm-tooltip-text-muted: #6b7280;
  /* Talent tree editor & student tree */
  --talent-canvas-bg: #eef2ff;
  --talent-canvas-border: rgba(124, 115, 255, 0.35);
  --talent-canvas-overlay: rgba(255, 255, 255, 0.04);
  --talent-panel-bg: rgba(255, 255, 255, 0.82);
  --talent-panel-border: rgba(124, 115, 255, 0.28);
  --talent-panel-heading: var(--color-primary-text);
  --talent-node-bg: rgba(255, 255, 255, 0.94);
  --talent-node-border: rgba(124, 115, 255, 0.42);
  --talent-node-text: #1e293b;
  --talent-node-subtext: #64748b;
  --talent-node-empty-bg: rgba(255, 255, 255, 0.55);
  --talent-tier-badge-bg: rgba(255, 255, 255, 0.95);
  --talent-tier-badge-text: #4338ca;
  --talent-tier-badge-border: rgba(124, 115, 255, 0.45);
  --talent-connection: #b45309;
  --talent-connection-glow: rgba(251, 191, 36, 0.45);
  --talent-class-defender: var(--color-class-defender);
  --talent-class-wizard: var(--color-class-wizard);
  --talent-class-healer: var(--color-class-healer);
  --talent-class-tinkerer: var(--color-class-tinkerer);

  /* ========== BREAKPOINTS ========== */
  /* Mobile First Approach */
  /* --bp-sm: 480px   - Small mobile */
  /* --bp-md: 720px   - Tablet portrait */
  /* --bp-lg: 1024px  - Tablet landscape / small laptop */
  /* --bp-xl: 1280px  - Desktop */
  /* --bp-2xl: 1536px - Large desktop */
}

/* ============================================================================
   Dark Mode Theme
   ============================================================================ */

html {
  color-scheme: light dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #1f2937;
  --color-background-alt: #111827;
  --color-background-secondary: #374151;
  --color-page-bg: #111827;
  --color-header-bg: #1f2937;
  --color-header-shadow: rgba(0, 0, 0, 0.35);
  --color-brand-hover-bg: rgba(124, 115, 255, 0.15);
  --color-input-bg: #374151;
  --color-input-text: #f3f4f6;
  --color-input-border: #4b5563;
  --color-modal-bg: #1f2937;
  --color-modal-surface: #374151;

  --color-surface: #374151;
  --color-surface-hover: #4b5563;
  --color-surface-active: #555d6f;

  --color-border: #4b5563;
  --color-border-dark: #6b7280;

  --color-text: #f9fafb;
  --color-text-secondary: #e5e7eb;
  --color-text-light: #cbd5e1;
  --color-text-inverse: #1f2937;
  --color-on-primary: #ffffff;
  --color-on-danger: #ffffff;

  --color-primary-light: #c4b5fd;
  --color-primary-text: #c4b5fd;

  --color-accent-chip-bg: rgba(55, 65, 81, 0.92);
  --color-accent-chip-text: var(--color-text-secondary);
  --color-accent-chip-border: var(--color-primary-light);

  --color-selection-bg: rgba(124, 115, 255, 0.28);
  --color-selection-hover: rgba(124, 115, 255, 0.14);
  --color-selection-muted: rgba(124, 115, 255, 0.2);

  --color-modal-shell-start: #1e293b;
  --color-modal-shell-end: #0f172a;
  --color-modal-shell-header: rgba(55, 65, 81, 0.92);
  --color-modal-shell-border: rgba(124, 115, 255, 0.45);

  --color-tool-accent: #c4b5fd;
  --color-tool-accent-icon: #a78bfa;
  --color-tool-inset: rgba(55, 65, 81, 0.88);
  --color-tool-inset-strong: rgba(31, 41, 55, 0.95);
  --color-tool-card: rgba(31, 41, 55, 0.92);
  --color-tool-hero-subtext: #ddd6fe;
  --color-tool-panel-wash: linear-gradient(
    180deg,
    rgba(30, 41, 59, 0.9) 0%,
    rgba(15, 23, 42, 0.92) 100%
  );
  --color-tool-status-success: #86efac;
  --color-tool-status-success-bg: rgba(34, 197, 94, 0.22);

  --color-warning-banner-bg: rgba(245, 158, 11, 0.18);
  --color-warning-banner-text: #fcd34d;
  --color-warning-banner-border: #f59e0b;

  --color-combat-shell-start: #1a1010;
  --color-combat-shell-end: #0f0a0a;
  --color-combat-body-bg: rgba(31, 41, 55, 0.85);
  --color-combat-phases-bg: rgba(55, 65, 81, 0.92);
  --color-combat-chip-bg: rgba(239, 68, 68, 0.22);
  --color-combat-chip-border: rgba(248, 113, 113, 0.55);
  --color-combat-chip-text: #fecaca;
  --color-combat-heading: #f9fafb;
  --color-combat-selection-bg: rgba(239, 68, 68, 0.24);
  --color-combat-selection-border: #f87171;
  --color-combat-selection-ring: rgba(248, 113, 113, 0.38);
  --color-combat-secondary-text: #fecaca;
  --color-combat-secondary-hover-bg: rgba(239, 68, 68, 0.22);
  --color-combat-row-bg: rgba(55, 65, 81, 0.95);
  --color-combat-custom-form-bg: rgba(31, 41, 55, 0.92);
  --color-combat-accent: #fca5a5;
  --color-combat-accent-strong: #fecaca;
  --color-combat-accent-muted: #fca5a5;

  --color-reward-shell-start: #0a1210;
  --color-reward-shell-end: #0f1a14;
  --color-reward-border: rgba(16, 185, 129, 0.35);
  --color-reward-selection-bg: rgba(16, 185, 129, 0.22);
  --color-reward-selection-border: #34d399;
  --color-reward-chip-bg: rgba(16, 185, 129, 0.18);
  --color-reward-chip-border: rgba(52, 211, 153, 0.45);
  --color-reward-chip-text: #a7f3d0;
  --color-reward-custom-form-bg: rgba(31, 41, 55, 0.92);
  --color-reward-accent: #6ee7b7;

  --color-audit-combat-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.16) 0%, var(--color-surface) 28%);
  --color-audit-reward-bg: linear-gradient(90deg, rgba(34, 197, 94, 0.14) 0%, var(--color-surface) 28%);
  --color-audit-magic-bg: linear-gradient(90deg, rgba(139, 92, 246, 0.14) 0%, var(--color-surface) 28%);

  --color-toolbar-btn-bg: transparent;
  --color-toolbar-btn-icon: #94a3b8;
  --color-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --color-toolbar-btn-active-bg: var(--color-primary);
  --color-toolbar-btn-active-icon: #ffffff;
  --color-toolbar-divider: rgba(255, 255, 255, 0.14);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
  --modal-backdrop: rgba(0, 0, 0, 0.65);

  --color-dm-bg-start: #0f172a;
  --color-dm-bg-end: #1e293b;
  --color-dm-border: rgba(124, 115, 255, 0.45);

  --dm-table-surface: #1e293b;
  --dm-table-header-bg: rgba(124, 115, 255, 0.22);
  --dm-table-header-text: #c4b5fd;
  --dm-table-border: rgba(124, 115, 255, 0.28);
  --dm-table-row-hover: rgba(124, 115, 255, 0.12);
  --dm-table-row-zebra: rgba(15, 23, 42, 0.55);
  --dm-table-text: #f3f4f6;
  --dm-table-text-muted: #cbd5e1;
  --dm-table-name-text: #ffffff;
  --dm-layout-toggle-bg: rgba(0, 0, 0, 0.25);
  --dm-layout-toggle-border: rgba(124, 115, 255, 0.35);
  --dm-layout-btn-text: #94a3b8;
  --dm-layout-btn-active-bg: #7C73FF;
  --dm-layout-btn-active-text: #ffffff;
  --dm-tooltip-bg: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  --dm-tooltip-border: rgba(124, 115, 255, 0.45);
  --dm-tooltip-text: #f9fafb;
  --dm-tooltip-text-muted: #cbd5e1;

  --talent-canvas-bg: #0b1220;
  --talent-canvas-border: rgba(124, 115, 255, 0.38);
  --talent-canvas-overlay: rgba(0, 0, 0, 0.12);
  --talent-panel-bg: rgba(30, 41, 59, 0.92);
  --talent-panel-border: rgba(124, 115, 255, 0.32);
  --talent-panel-heading: #c4b5fd;
  --talent-node-bg: rgba(15, 23, 42, 0.88);
  --talent-node-border: rgba(167, 139, 250, 0.45);
  --talent-node-text: #f8fafc;
  --talent-node-subtext: #cbd5e1;
  --talent-node-empty-bg: rgba(15, 23, 42, 0.55);
  --talent-tier-badge-bg: rgba(30, 41, 59, 0.96);
  --talent-tier-badge-text: #e9d5ff;
  --talent-tier-badge-border: rgba(167, 139, 250, 0.5);
  --talent-connection: #fbbf24;
  --talent-connection-glow: rgba(251, 191, 36, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-background: #1f2937;
    --color-background-alt: #111827;
    --color-background-secondary: #374151;
    --color-page-bg: #111827;
    --color-header-bg: #1f2937;
    --color-header-shadow: rgba(0, 0, 0, 0.35);
    --color-brand-hover-bg: rgba(124, 115, 255, 0.15);
    --color-input-bg: #374151;
    --color-input-text: #f3f4f6;
    --color-input-border: #4b5563;
    --color-modal-bg: #1f2937;
    --color-modal-surface: #374151;

    --color-surface: #374151;
    --color-surface-hover: #4b5563;
    --color-surface-active: #555d6f;

    --color-border: #4b5563;
    --color-border-dark: #6b7280;

    --color-text: #f9fafb;
    --color-text-secondary: #e5e7eb;
    --color-text-light: #cbd5e1;
    --color-text-inverse: #1f2937;
  --color-on-primary: #ffffff;
  --color-on-danger: #ffffff;

    --color-primary-light: #c4b5fd;
    --color-primary-text: #c4b5fd;

    --color-accent-chip-bg: rgba(55, 65, 81, 0.92);
    --color-accent-chip-text: var(--color-text-secondary);
    --color-accent-chip-border: var(--color-primary-light);

    --color-selection-bg: rgba(124, 115, 255, 0.28);
    --color-selection-hover: rgba(124, 115, 255, 0.14);
    --color-selection-muted: rgba(124, 115, 255, 0.2);

    --color-modal-shell-start: #1e293b;
    --color-modal-shell-end: #0f172a;
    --color-modal-shell-header: rgba(55, 65, 81, 0.92);
    --color-modal-shell-border: rgba(124, 115, 255, 0.45);

    --color-tool-accent: #c4b5fd;
    --color-tool-accent-icon: #a78bfa;
    --color-tool-inset: rgba(55, 65, 81, 0.88);
    --color-tool-inset-strong: rgba(31, 41, 55, 0.95);
    --color-tool-card: rgba(31, 41, 55, 0.92);
    --color-tool-hero-subtext: #ddd6fe;
    --color-tool-panel-wash: linear-gradient(
      180deg,
      rgba(30, 41, 59, 0.9) 0%,
      rgba(15, 23, 42, 0.92) 100%
    );
    --color-tool-status-success: #86efac;
    --color-tool-status-success-bg: rgba(34, 197, 94, 0.22);

    --color-warning-banner-bg: rgba(245, 158, 11, 0.18);
    --color-warning-banner-text: #fcd34d;
    --color-warning-banner-border: #f59e0b;

    --color-combat-shell-start: #1a1010;
    --color-combat-shell-end: #0f0a0a;
    --color-combat-body-bg: rgba(31, 41, 55, 0.85);
    --color-combat-phases-bg: rgba(55, 65, 81, 0.92);
    --color-combat-chip-bg: rgba(239, 68, 68, 0.22);
    --color-combat-chip-border: rgba(248, 113, 113, 0.55);
    --color-combat-chip-text: #fecaca;
    --color-combat-heading: #f9fafb;
    --color-combat-selection-bg: rgba(239, 68, 68, 0.24);
    --color-combat-selection-border: #f87171;
    --color-combat-selection-ring: rgba(248, 113, 113, 0.38);
    --color-combat-secondary-text: #fecaca;
    --color-combat-secondary-hover-bg: rgba(239, 68, 68, 0.22);
    --color-combat-row-bg: rgba(55, 65, 81, 0.95);
    --color-combat-custom-form-bg: rgba(31, 41, 55, 0.92);
    --color-combat-accent: #fca5a5;
    --color-combat-accent-strong: #fecaca;
    --color-combat-accent-muted: #fca5a5;

    --color-reward-shell-start: #0a1210;
    --color-reward-shell-end: #0f1a14;
    --color-reward-border: rgba(16, 185, 129, 0.35);
    --color-reward-selection-bg: rgba(16, 185, 129, 0.22);
    --color-reward-selection-border: #34d399;
    --color-reward-chip-bg: rgba(16, 185, 129, 0.18);
    --color-reward-chip-border: rgba(52, 211, 153, 0.45);
    --color-reward-chip-text: #a7f3d0;
    --color-reward-custom-form-bg: rgba(31, 41, 55, 0.92);
    --color-reward-accent: #6ee7b7;

    --color-audit-combat-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.16) 0%, var(--color-surface) 28%);
    --color-audit-reward-bg: linear-gradient(90deg, rgba(34, 197, 94, 0.14) 0%, var(--color-surface) 28%);
    --color-audit-magic-bg: linear-gradient(90deg, rgba(139, 92, 246, 0.14) 0%, var(--color-surface) 28%);

    --color-toolbar-btn-bg: transparent;
    --color-toolbar-btn-icon: #94a3b8;
    --color-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --color-toolbar-btn-active-bg: var(--color-primary);
    --color-toolbar-btn-active-icon: #ffffff;
    --color-toolbar-divider: rgba(255, 255, 255, 0.14);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    --modal-backdrop: rgba(0, 0, 0, 0.65);

    --color-dm-bg-start: #0f172a;
    --color-dm-bg-end: #1e293b;
    --color-dm-border: rgba(124, 115, 255, 0.45);

    --dm-table-surface: #1e293b;
    --dm-table-header-bg: rgba(124, 115, 255, 0.22);
    --dm-table-header-text: #c4b5fd;
    --dm-table-border: rgba(124, 115, 255, 0.28);
    --dm-table-row-hover: rgba(124, 115, 255, 0.12);
    --dm-table-row-zebra: rgba(15, 23, 42, 0.55);
    --dm-table-text: #f3f4f6;
    --dm-table-text-muted: #cbd5e1;
    --dm-table-name-text: #ffffff;
    --dm-layout-toggle-bg: rgba(0, 0, 0, 0.25);
    --dm-layout-toggle-border: rgba(124, 115, 255, 0.35);
    --dm-layout-btn-text: #94a3b8;
    --dm-layout-btn-active-bg: #7C73FF;
    --dm-layout-btn-active-text: #ffffff;
    --dm-tooltip-bg: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    --dm-tooltip-border: rgba(124, 115, 255, 0.45);
    --dm-tooltip-text: #f9fafb;
    --dm-tooltip-text-muted: #cbd5e1;

    --talent-canvas-bg: #0b1220;
    --talent-canvas-border: rgba(124, 115, 255, 0.38);
    --talent-canvas-overlay: rgba(0, 0, 0, 0.12);
    --talent-panel-bg: rgba(30, 41, 59, 0.92);
    --talent-panel-border: rgba(124, 115, 255, 0.32);
    --talent-panel-heading: #c4b5fd;
    --talent-node-bg: rgba(15, 23, 42, 0.88);
    --talent-node-border: rgba(167, 139, 250, 0.45);
    --talent-node-text: #f8fafc;
    --talent-node-subtext: #cbd5e1;
    --talent-node-empty-bg: rgba(15, 23, 42, 0.55);
    --talent-tier-badge-bg: rgba(30, 41, 59, 0.96);
    --talent-tier-badge-text: #e9d5ff;
    --talent-tier-badge-border: rgba(167, 139, 250, 0.5);
    --talent-connection: #fbbf24;
    --talent-connection-glow: rgba(251, 191, 36, 0.55);
  }
}