/**
 * Modern Dark Theme - Optimized Colors
 * Based on modern design systems and accessibility standards
 */

:root.dark {
    /* === SURFACE COLORS === */
    --bg-primary: #0f172a;          /* Main background (slate-900) */
    --bg-secondary: #1e293b;        /* Cards, containers (slate-800) */
    --bg-tertiary: #334155;         /* Elevated surfaces (slate-700) */
    --bg-elevated: #475569;         /* Highest elevation (slate-600) */
    
    /* === TEXT COLORS === */
    --text-primary: #f8fafc;        /* High emphasis text (slate-50) */
    --text-secondary: #e2e8f0;      /* Medium emphasis text (slate-200) */
    --text-tertiary: #cbd5e1;       /* Low emphasis text (slate-300) */
    --text-muted: #94a3b8;          /* Disabled/placeholder text (slate-400) */
    
    /* === BORDER COLORS === */
    --border-primary: #334155;      /* Default borders (slate-700) */
    --border-secondary: #475569;    /* Subtle borders (slate-600) */
    --border-focus: #3b82f6;        /* Focus borders (blue-500) */
    
    /* === ACCENT COLORS === */
    --accent-primary: #3b82f6;      /* Primary blue (blue-500) */
    --accent-primary-hover: #2563eb; /* Primary blue hover (blue-600) */
    --accent-primary-light: #1e40af; /* Primary blue pressed (blue-700) */
    --accent-bg: #1e3a8a;           /* Accent background (blue-800) */
    --accent-bg-hover: #1d4ed8;     /* Accent background hover (blue-700) */
    
    /* === STATE COLORS === */
    --success: #10b981;             /* Success green (emerald-500) */
    --success-bg: #064e3b;          /* Success background (emerald-900) */
    --warning: #f59e0b;             /* Warning amber (amber-500) */
    --warning-bg: #78350f;          /* Warning background (amber-900) */
    --error: #ef4444;               /* Error red (red-500) */
    --error-bg: #7f1d1d;            /* Error background (red-900) */
    
    /* === INTERACTIVE STATES === */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --press-overlay: rgba(255, 255, 255, 0.1);
    --focus-ring: rgba(59, 130, 246, 0.5);
    
    /* === SHADOWS (ELEVATION) === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* === THEME TRANSITION === */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* === BASE STYLES === */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* === TYPOGRAPHY === */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
    color: var(--text-primary);
}

html.dark .text-gray-400 { color: var(--text-muted); }
html.dark .text-gray-500 { color: var(--text-muted); }
html.dark .text-gray-600 { color: var(--text-tertiary); }
html.dark .text-gray-700 { color: var(--text-secondary); }
html.dark .text-gray-900 { color: var(--text-primary); }
html.dark .text-dark { color: var(--text-primary); }

/* === SURFACES === */
html.dark .bg-white { background-color: var(--bg-secondary); }
html.dark .bg-gray-50 { background-color: var(--bg-primary); }
html.dark .bg-gray-100 { background-color: var(--bg-secondary); }
html.dark .bg-gray-200 { background-color: var(--bg-tertiary); }
html.dark .bg-graybg { background-color: var(--bg-secondary); }

/* === BORDERS === */
html.dark .border-gray-200 { border-color: var(--border-primary); }
html.dark .border-gray-300 { border-color: var(--border-secondary); }
html.dark .border-secondary { border-color: var(--border-primary); }
html.dark .border-gray-700 { border-color: var(--border-primary); }

/* === HEADER === */
html.dark header {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    backdrop-filter: blur(10px);
}

/* === HERO SECTION === */
html.dark .hero-bg {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

html.dark .hero-bg::before {
    opacity: 0.1;
}

/* === NAVIGATION === */
html.dark nav a {
    color: var(--text-tertiary);
}

html.dark nav a:hover {
    color: var(--accent-primary);
}

/* === BUTTONS & INTERACTIVE ELEMENTS === */
html.dark .role-btn,
html.dark .task-btn {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

html.dark .role-btn:hover,
html.dark .task-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

html.dark .role-btn.active,
html.dark .task-btn.active {
    background-color: var(--accent-bg);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* === TOOL CARDS === */
html.dark .tool-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

html.dark .tool-card:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-secondary);
    box-shadow: var(--shadow-lg);
}

/* === FORM INPUTS === */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="search"]:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
    background-color: var(--bg-secondary);
}

html.dark input[type="text"]::placeholder,
html.dark input[type="email"]::placeholder,
html.dark input[type="search"]::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted);
}

/* === BADGES & LABELS === */
html.dark .bg-blue-100 {
    background-color: var(--accent-bg);
    color: var(--text-primary);
}

html.dark .text-blue-800 {
    color: var(--text-primary);
}

/* === FOOTER === */
html.dark footer {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

html.dark footer h3 {
    color: var(--text-primary);
}

html.dark footer ul li a {
    color: var(--text-tertiary);
}

html.dark footer ul li a:hover {
    color: var(--accent-primary);
}

/* === LOADING STATES === */
html.dark .loading {
    border-color: var(--bg-tertiary);
    border-top-color: var(--accent-primary);
}

/* === SHADOWS FOR DEPTH === */
html.dark .shadow-sm { box-shadow: var(--shadow-sm); }
html.dark .shadow-md { box-shadow: var(--shadow-md); }
html.dark .shadow-lg { box-shadow: var(--shadow-lg); }
html.dark .shadow-xl { box-shadow: var(--shadow-xl); }

/* === SCROLLBAR STYLING === */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background-color: var(--bg-primary);
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-elevated);
}

/* === SELECTION STYLING === */
html.dark ::selection {
    background-color: var(--accent-primary);
    color: var(--text-primary);
}

/* === HIGH CONTRAST MODE SUPPORT === */
@media (prefers-contrast: high) {
    html.dark {
        --text-primary: #ffffff;
        --border-primary: #64748b;
        --accent-primary: #60a5fa;
    }
}

/* === REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
    html.dark *,
    html.dark *::before,
    html.dark *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}