/**
 * Dark Theme
 * Local First Tools v2
 *
 * This is the default theme. Variables are already defined in variables.css
 * This file exists for explicit theme switching and potential overrides.
 */

.theme-dark {
    /* Background colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-elevated: #242424;
    --bg-overlay: rgba(0, 0, 0, 0.8);

    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
    --text-muted: rgba(255, 255, 255, 0.35);
    --text-inverse: #0a0a0a;

    /* Border colors */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);
    --border-focus: var(--color-accent);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px);

    /* Scrollbar */
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);

    /* 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 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
}

/* ========================================
   DARK THEME SPECIFIC ADJUSTMENTS
   ======================================== */

.theme-dark .tool-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme-dark .tool-card:hover {
    box-shadow: var(--shadow-xl), var(--shadow-glow-accent);
}

.theme-dark .header {
    background: rgba(10, 10, 10, 0.85);
}

.theme-dark .bottom-nav {
    background: rgba(10, 10, 10, 0.9);
}

.theme-dark .modal-content {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

/* Code blocks in dark mode */
.theme-dark code {
    background: rgba(255, 255, 255, 0.1);
}

/* Selection color */
.theme-dark ::selection {
    background: var(--color-accent);
    color: var(--bg-primary);
}