/* ============================================================
   NATIA ART - DARK/LIGHT THEME SYSTEM
   ============================================================
   Modern CSS Variables approach for theme switching
   
   Version: v1.0 - Optimized (280 lines, -75 from 355)
   ============================================================ */

/* ============================================================
   CSS VARIABLES - LIGHT THEME (Default)
   ============================================================ */

:root {
    /* Backgrounds */
    --color-background: #ffffff;
    --color-background-secondary: #f8f9fa;
    --color-background-tertiary: #f1f3f5;

    /* Text Colors */
    --color-text-light: #95a5a6;
    --color-text-muted: #7f8c8d;
    --color-text-primary: #2c3e50;
    --color-text-secondary: #555555;
    --color-text-tertiary: #333333;

    /* Accent Colors */
    --color-accent-primary: #3498db;
    --color-accent-primary-hover: #2980b9;
    --color-accent-secondary: #27ae60;
    --color-accent-secondary-hover: #229954;

    /* Borders */
    --color-border: #ecf0f1;
    --color-border-dark: #dfe4e6;

    /* Status Colors */
    --color-status-available: #27ae60;
    --color-status-reserved: #3498db;
    --color-status-sold: #e74c3c;

    /* Shadows */
    --shadow-artwork: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Gallery Specific */
    --gallery-item-bg: #ffffff;
    --gallery-item-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    /* Header/Footer */
    --footer-background: #2c3e50;
    --footer-text: #ecf0f1;
    --header-background: #ffffff;
    --header-border: rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-theme: 0.4s;
}

/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"] {
    /* Backgrounds */
    --color-background: #1a1a1a;
    --color-background-secondary: #242424;
    --color-background-tertiary: #2d2d2d;

    /* Text Colors */
    --color-text-light: #a0a0a0;
    --color-text-muted: #888888;
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #b8b8b8;
    --color-text-tertiary: #d0d0d0;

    /* Accent Colors */
    --color-accent-primary: #5dade2;
    --color-accent-primary-hover: #7dc4eb;
    --color-accent-secondary: #58d68d;
    --color-accent-secondary-hover: #73dd9a;

    /* Borders */
    --color-border: #3a3a3a;
    --color-border-dark: #4a4a4a;

    /* Status Colors */
    --color-status-available: #58d68d;
    --color-status-reserved: #5dade2;
    --color-status-sold: #ec7063;

    /* Shadows */
    --shadow-artwork: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.4);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Gallery Specific */
    --gallery-item-bg: #242424;
    --gallery-item-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);

    /* Header/Footer */
    --footer-background: #1a1a1a;
    --footer-text: #e8e8e8;
    --header-background: #1f1f1f;
    --header-border: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   APPLY THEME VARIABLES
   ============================================================ */

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    transition: background-color var(--transition-theme) ease,
                color var(--transition-theme) ease;
}

a {
    color: var(--color-accent-primary);
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-accent-primary-hover);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

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

.background-tertiary {
    background-color: var(--color-background-tertiary);
}

.border {
    border-color: var(--color-border);
}

.border-dark {
    border-color: var(--color-border-dark);
}

.shadow-large {
    box-shadow: var(--shadow-large);
}

.shadow-medium {
    box-shadow: var(--shadow-medium);
}

.shadow-small {
    box-shadow: var(--shadow-small);
}

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

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

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

/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */

* {
    transition-duration: var(--transition-theme);
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: ease;
}

.no-transitions * {
    transition: none !important;
}

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

.theme-toggle {
    align-items: center;
    background: var(--color-accent-primary);
    border: 3px solid var(--color-background);
    border-radius: 50%;
    bottom: 2rem;
    box-shadow: var(--shadow-large);
    cursor: pointer;
    display: flex;
    height: 56px;
    justify-content: center;
    position: fixed;
    right: 2rem;
    transition: all var(--transition-speed) ease;
    width: 56px;
    z-index: 1000;
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle:hover {
    background: var(--color-accent-primary-hover);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    transform: scale(1.1);
}

.theme-toggle svg {
    fill: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    height: 26px;
    stroke: white;
    stroke-width: 1;
    transition: transform var(--transition-speed) ease;
    width: 26px;
}

.theme-toggle:hover svg {
    transform: rotate(20deg);
}

/* Icon visibility */
[data-theme="light"] .theme-toggle .moon-icon,
:root:not([data-theme]) .theme-toggle .moon-icon {
    display: block;
}

[data-theme="light"] .theme-toggle .sun-icon,
:root:not([data-theme]) .theme-toggle .sun-icon {
    display: none;
}

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

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

/* ============================================================
   LOGO DARK MODE
   ============================================================ */

[data-theme="dark"] .logo {
    filter: invert(1) brightness(1.2);
    transition: filter var(--transition-theme);
}

/* ============================================================
   SYSTEM PREFERENCE DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
    
    /* Override root variables for system dark mode */
    :root:not([data-theme="light"]) {
        --color-background: #1a1a1a;
        --color-background-secondary: #242424;
        --color-background-tertiary: #2d2d2d;
        --color-text-muted: #888888;
        --color-text-primary: #e8e8e8;
        --color-text-secondary: #b8b8b8;
        --color-accent-primary: #5dade2;
        --color-accent-primary-hover: #7dc4eb;
        --color-accent-secondary: #58d68d;
        --color-accent-secondary-hover: #73dd9a;
        --color-border: #3a3a3a;
        --color-border-dark: #4a4a4a;
        --color-status-available: #58d68d;
        --color-status-reserved: #5dade2;
        --color-status-sold: #ec7063;
        --shadow-artwork: 0 10px 40px rgba(0, 0, 0, 0.6);
        --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.5);
        --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.4);
        --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
        --gallery-item-bg: #242424;
        --gallery-item-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
        --footer-background: #1a1a1a;
        --footer-text: #e8e8e8;
        --header-background: #1f1f1f;
        --header-border: rgba(255, 255, 255, 0.1);
    }

    /* Logo invert */
    :root:not([data-theme="light"]) .logo {
        filter: invert(1) brightness(1.2);
    }

    /* Toggle icons */
    :root:not([data-theme]) .theme-toggle .moon-icon {
        display: none;
    }

    :root:not([data-theme]) .theme-toggle .sun-icon {
        display: block;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    
    .theme-toggle {
        bottom: 1rem;
        height: 48px;
        right: 1rem;
        width: 48px;
    }

    .theme-toggle svg {
        height: 20px;
        width: 20px;
    }
}