:root,
[data-theme="light"] {
    /* Main Accent */
    --primary-color: #2563eb; /* насичений синій */
    --primary-color-light: #e3eafe; /* дуже світлий синій */
    --primary-color-dark: #193c7e; /* глибокий синій */
    /* Semantic */
    --danger-color: #888888; /* приглушено-сірий для помилок */
    --success-color: #737373; /* стримано-сірий для успіху */
    --warning-color: #a3a3a3; /* середньо-сірий для попереджень */
    --info-color: #4b5563; /* холодний сіро-блакитний */
    /* Backgrounds */
    --bg-main: #f5f5f5; /* дуже світло-сірий */
    --bg-content: #f5f5f5; /* світло-сірий */
    --bg-header: #f5f5f5;
    --bg-hover: #ebebeb;
    /* Text */
    --text-primary: #23272f; /* темно-сірий */
    --text-secondary: #6b7280;
    --text-muted: #a3a3a3;
    --text-on-primary: #ffffff;
    --text-on-danger: #f3f4f6;
    /* Borders & Dividers */
    --border-color: #d1d5db;
    /* Cards / Inputs */
    --card-bg: #ffffff;
    --card-border-color: #d1d5db;
    --card-shadow: 0 4px 14px rgba(0,0,0,0.08);
    --input-bg: #f3f4f6;
    --input-border-color: #e5e7eb;
    --input-placeholder-color: #a3a3a3;
    /* Error */
    --error-bg: #f3f4f6;
    --error-text: #444444;
    /* Event backgrounds */
    --event-conference-bg: #e3eafe;
    --event-workshop-bg: #e7e8ea;
    --event-seminar-bg: #ececec;
    --event-meetup-bg: #f1f1f1;
    --event-webinar-bg: #e5e5e5;
    --event-default-bg: #f9f9f9;
    /* Background images */
    --bg-image: url("/images/background-light.jpg?v=3");
    --bg-fallback-color: #ffffff;
    --bg-overlay-color: rgba(255,255,255,0.8);
    /* Accent hover */
    --accent-color: #2563eb;
    --accent-color-hover: #193c7e;
    /* Event time */
    --event-time-bg: rgba(255, 255, 255, 0.1);
    --event-time-text: var(--text-primary);
    /* Calendar navigation */
    --calendar-nav-hover-bg: rgba(59, 130, 246, 0.1);
    --calendar-nav-hover-border: rgba(59, 130, 246, 0.3);
    /* Calendar today */
    --calendar-today-bg: linear-gradient(135deg, var(--accent-color) 0%, rgba(59, 130, 246, 0.8) 100%);
    --calendar-today-text: white;
    --calendar-today-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    /* Day indicator */
    --day-indicator-color: var(--accent-color);
    --day-indicator-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
    --day-indicator-today-color: rgba(255, 255, 255, 0.8);
    --day-indicator-today-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    /* Event categories */
    --event-conference-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    --event-conference-border: rgba(59, 130, 246, 0.3);
    --event-conference-text: rgb(59, 130, 246);
    --event-workshop-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%);
    --event-workshop-border: rgba(34, 197, 94, 0.3);
    --event-workshop-text: #16a34a;
    --event-seminar-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.1) 100%);
    --event-seminar-border: rgba(168, 85, 247, 0.3);
    --event-seminar-text: #9333ea;
    --event-meetup-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
    --event-meetup-border: rgba(245, 158, 11, 0.3);
    --event-meetup-text: #d97706;
    --event-webinar-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.1) 100%);
    --event-webinar-border: rgba(236, 72, 153, 0.3);
    --event-webinar-text: #db2777;
    --event-default-bg: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.1) 100%);
    --event-default-border: rgba(107, 114, 128, 0.3);
    --event-default-text: #6b7280;
    /* Action Button Colors - Light Theme */
    --action-edit-bg: rgba(59, 130, 246, 0.1);
    --action-edit-border: rgba(59, 130, 246, 0.3);
    --action-edit-color: rgb(59, 130, 246);
    --action-edit-hover-bg: rgba(59, 130, 246, 0.2);
    --action-edit-hover-shadow: rgba(59, 130, 246, 0.3);
    --action-archive-bg: rgba(239, 68, 68, 0.1);
    --action-archive-border: rgba(239, 68, 68, 0.3);
    --action-archive-color: rgb(239, 68, 68);
    --action-archive-hover-bg: rgba(239, 68, 68, 0.2);
    --action-archive-hover-shadow: rgba(239, 68, 68, 0.3);
    /* Status Badge Colors - Light Theme */
    --status-active-bg: rgba(34, 197, 94, 0.1);
    --status-active-border: rgba(34, 197, 94, 0.3);
    --status-active-color: rgb(34, 197, 94);
    --status-inactive-bg: rgba(107, 114, 128, 0.1);
    --status-inactive-border: rgba(107, 114, 128, 0.3);
    --badge-secondary-bg: rgba(107, 114, 128, 0.1);
    --badge-secondary-border: rgba(107, 114, 128, 0.2);
    /* Table & Row Colors - Light Theme */
    --table-header-bg: rgba(255, 255, 255, 0.05);
    --table-body-bg: rgba(255, 255, 255, 0.02);
    --table-row-border: rgba(255, 255, 255, 0.05);
    --table-row-hover-shadow: rgba(59, 130, 246, 0.15);
    --table-row-selected-bg: rgba(59, 130, 246, 0.03);
    --table-row-selected-hover-bg: rgba(59, 130, 246, 0.05);
    --table-row-selected-hover-shadow: rgba(59, 130, 246, 0.2);
    /* Secondary Button Colors - Light Theme */
    --button-secondary-bg: rgba(255, 255, 255, 0.1);
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.15);
    /* Empty State Colors - Light Theme */
    --empty-state-bg: rgba(255, 255, 255, 0.02);
    /* Modal Colors - Light Theme */
    --modal-backdrop: rgba(0, 0, 0, 0.6);
    /* Form Focus Colors - Light Theme */
    --form-focus-bg: rgba(255, 255, 255, 0.95);
    --module-preview-bg: rgba(37, 99, 235, 0.1);
    --module-preview-border: rgba(37, 99, 235, 0.2);
    --tree-node-hover-bg: rgba(59, 130, 246, 0.05);
    --tree-node-selected-bg: var(--accent-color);
    --tree-border-color: var(--card-border-color);
    --code-bg: rgba(59, 130, 246, 0.1);
    --code-text: rgb(59, 130, 246);
    --code-border: rgba(59, 130, 246, 0.2);
    --pagination-bg: rgba(255, 255, 255, 0.1);
    --pagination-hover-bg: rgba(59, 130, 246, 0.1);
    --pagination-active-bg: var(--accent-color);
    --permission-assigned-border: #10b981;
    --permission-available-border: var(--text-muted);
    --permission-hover-bg: rgba(59, 130, 246, 0.05);
    --success-color: #10b981;
    --error-color: #ef4444;
    --table-row-selected-bg: rgba(59, 130, 246, 0.1);
    --table-row-selected-hover-bg: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] {
    /* Main Accent */
    --primary-color: #2563eb;
    --primary-color-light: #304985; /* слабкий синій відтінок */
    --primary-color-dark: #193c7e;
    /* Semantic */
    --danger-color: #3d3d3d;
    --success-color: #5a5a5a;
    --warning-color: #717171;
    --info-color: #8b8fa3; /* темно-синювато-сірий */
    /* Backgrounds */
    --bg-main: #181a1b;
    --bg-content: #181a1b;
    --bg-header: #181a1b;
    --bg-hover: #23272f;
    /* Text */
    --text-primary: #e5e5e5;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --text-on-primary: #ffffff;
    --text-on-danger: #dddddd;
    /* Borders & Dividers */
    --border-color: #363636;
    /* Cards / Inputs */
    --card-bg: #212225;
    --card-border-color: #363636;
    --card-shadow: 0 4px 14px rgba(0,0,0,0.25);
    --input-bg: #23272f;
    --input-border-color: #393939;
    --input-placeholder-color: #888888;
    /* Error */
    --error-bg: #23272f;
    --error-text: #bbbbbb;
    /* Event backgrounds */
    --event-conference-bg: #304985;
    --event-workshop-bg: #323235;
    --event-seminar-bg: #343537;
    --event-meetup-bg: #38393a;
    --event-webinar-bg: #25262b;
    --event-default-bg: #23272f;
    /* Background images */
    --bg-image: url("/images/background-dark.jpg?v=3");
    --bg-fallback-color: #121212;
    --bg-overlay-color: rgba(24,24,27,0.9);
    /* Accent hover */
    --accent-color: #2563eb;
    --accent-color-hover: #193c7e;
    /* Event time */
    --event-time-bg: rgba(0, 0, 0, 0.2);
    --event-time-text: var(--text-primary);
    /* Calendar navigation */
    --calendar-nav-hover-bg: rgba(59, 130, 246, 0.15);
    --calendar-nav-hover-border: rgba(59, 130, 246, 0.4);
    /* Calendar today */
    --calendar-today-bg: linear-gradient(135deg, var(--accent-color) 0%, rgba(59, 130, 246, 0.9) 100%);
    --calendar-today-text: white;
    --calendar-today-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
    /* Day indicator */
    --day-indicator-color: var(--accent-color);
    --day-indicator-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
    --day-indicator-today-color: rgba(255, 255, 255, 0.9);
    --day-indicator-today-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
    /* Event categories - darker theme variations */
    --event-conference-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    --event-conference-border: rgba(59, 130, 246, 0.4);
    --event-conference-text: rgb(96, 165, 250);
    --event-workshop-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
    --event-workshop-border: rgba(34, 197, 94, 0.4);
    --event-workshop-text: #4ade80;
    --event-seminar-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(147, 51, 234, 0.15) 100%);
    --event-seminar-border: rgba(168, 85, 247, 0.4);
    --event-seminar-text: #c084fc;
    --event-meetup-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    --event-meetup-border: rgba(245, 158, 11, 0.4);
    --event-meetup-text: #fbbf24;
    --event-webinar-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.15) 100%);
    --event-webinar-border: rgba(236, 72, 153, 0.4);
    --event-webinar-text: #f472b6;
    --event-default-bg: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.15) 100%);
    --event-default-border: rgba(107, 114, 128, 0.4);
    --event-default-text: #9ca3af;
    /* Action Button Colors - Dark Theme */
    --action-edit-bg: rgba(59, 130, 246, 0.15);
    --action-edit-border: rgba(59, 130, 246, 0.4);
    --action-edit-color: rgb(59, 130, 246);
    --action-edit-hover-bg: rgba(59, 130, 246, 0.25);
    --action-edit-hover-shadow: rgba(59, 130, 246, 0.4);
    --action-archive-bg: rgba(239, 68, 68, 0.15);
    --action-archive-border: rgba(239, 68, 68, 0.4);
    --action-archive-color: rgb(239, 68, 68);
    --action-archive-hover-bg: rgba(239, 68, 68, 0.25);
    --action-archive-hover-shadow: rgba(239, 68, 68, 0.4);
    /* Status Badge Colors - Dark Theme */
    --status-active-bg: rgba(34, 197, 94, 0.15);
    --status-active-border: rgba(34, 197, 94, 0.4);
    --status-active-color: rgb(34, 197, 94);
    --status-inactive-bg: rgba(107, 114, 128, 0.15);
    --status-inactive-border: rgba(107, 114, 128, 0.4);
    --badge-secondary-bg: rgba(107, 114, 128, 0.15);
    --badge-secondary-border: rgba(107, 114, 128, 0.3);
    /* Table & Row Colors - Dark Theme */
    --table-header-bg: rgba(0, 0, 0, 0.1);
    --table-body-bg: rgba(0, 0, 0, 0.05);
    --table-row-border: rgba(255, 255, 255, 0.1);
    --table-row-hover-shadow: rgba(59, 130, 246, 0.2);
    --table-row-selected-bg: rgba(59, 130, 246, 0.08);
    --table-row-selected-hover-bg: rgba(59, 130, 246, 0.12);
    --table-row-selected-hover-shadow: rgba(59, 130, 246, 0.25);
    /* Secondary Button Colors - Dark Theme */
    --button-secondary-bg: rgba(255, 255, 255, 0.05);
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.1);
    /* Empty State Colors - Dark Theme */
    --empty-state-bg: rgba(0, 0, 0, 0.05);
    /* Modal Colors - Dark Theme */
    --modal-backdrop: rgba(0, 0, 0, 0.8);
    /* Form Focus Colors - Dark Theme */
    --form-focus-bg: rgba(0, 0, 0, 0.8);
    --module-preview-bg: rgba(37, 99, 235, 0.15);
    --module-preview-border: rgba(37, 99, 235, 0.3);
    --tree-node-hover-bg: rgba(59, 130, 246, 0.1);
    --tree-node-selected-bg: var(--accent-color);
    --tree-border-color: var(--card-border-color);
    --code-bg: rgba(59, 130, 246, 0.15);
    --code-text: rgb(96, 165, 250);
    --code-border: rgba(59, 130, 246, 0.3);
    --pagination-bg: rgba(255, 255, 255, 0.05);
    --pagination-hover-bg: rgba(59, 130, 246, 0.15);
    --pagination-active-bg: var(--accent-color);
    --permission-assigned-border: #34d399;
    --permission-available-border: var(--text-muted);
    --permission-hover-bg: rgba(59, 130, 246, 0.1);
    --success-color: #34d399;
    --error-color: #f87171;
    --table-row-selected-bg: rgba(59, 130, 246, 0.2);
    --table-row-selected-hover-bg: rgba(59, 130, 246, 0.25);
}