/* Copyright (c) CanadaWebDeveloper. All rights reserved. */
/* Theme system - CSS variables for dark and light themes */

/* === Default Theme (Dark) === */
:root, [data-theme="dark"] {
    --color-primary: #00d9ff;
   /* --color-secondary: #0f0101;*/
    --color-accent: #222494;
    --color-background: #0a0a0a;
    --color-surface: #1a1a1a;
    --color-surface-light: #2a2a2a;
    --color-text: #ffffff;
    --color-text-muted: #a0a0a0;
    --color-border: #333333;

    --font-body: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 217, 255, 0.3);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Glassmorphism variables */
    --glass-bg: rgba(26, 26, 26, 0.7);
    --glass-blur: 15px;
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* === Light Theme === */
[data-theme="light"] {
    --color-primary: #0099cc;
 /*    --color-secondary: #5b4bc4; */
    --color-accent: #d4004e;
    --color-background: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-light: #fafafa;
    --color-text: #1a1a1a;
    --color-text-muted: #666666;
    --color-border: #e0e0e0;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 20px rgba(0, 153, 204, 0.3);

    /* Glassmorphism variables for light mode */
    --glass-bg: rgba(255, 255, 255, 0.281);
    --glass-border: rgba(0, 0, 0, 0.1);
}

/* === Light Theme Specific Overrides === */
[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .glass-panel,
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.849);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .showcase-card {
    background: rgba(255, 255, 255, 0.849);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-subitem:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .loader {
    border-color: var(--color-surface-light);
    border-top-color: var(--color-primary);
}

[data-theme="light"] .menu-toggle {
    background: rgba(255, 255, 255, 0.95);
}

/* === Theme Transition === */
body,
.sidebar,
.glass-panel,
.glass-card,
.showcase-card,
.form-input,
.form-textarea,
.nav-item,
.nav-subitem,
.menu-toggle {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

/* === Custom Scrollbar (Dark) === */
:root, [data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface);
}

:root::-webkit-scrollbar, [data-theme="dark"]::-webkit-scrollbar {
    width: 10px;
}

:root::-webkit-scrollbar-track, [data-theme="dark"]::-webkit-scrollbar-track {
    background: var(--color-surface);
}

:root::-webkit-scrollbar-thumb, [data-theme="dark"]::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}

:root::-webkit-scrollbar-thumb:hover, [data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* === Custom Scrollbar (Light) === */
[data-theme="light"] {
    scrollbar-color: var(--color-primary) var(--color-surface-light);
}

[data-theme="light"]::-webkit-scrollbar-track {
    background: var(--color-surface-light);
}

[data-theme="light"]::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}

[data-theme="light"]::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}

/* === Theme-Specific Animations === */
@media (prefers-reduced-motion: no-preference) {
    [data-theme] {
        transition: background-color 0.3s ease, color 0.3s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === Print Styles === */
@media print {
    [data-theme="dark"] {
        --color-background: #ffffff;
        --color-text: #000000;
    }
}