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

:root {
    /* === SURFACE COLORS === */
    --bg-primary: #ffffff;          /* Main background */
    --bg-secondary: #f8fafc;        /* Cards, containers (slate-50) */
    --bg-tertiary: #f1f5f9;         /* Elevated surfaces (slate-100) */
    --bg-elevated: #e2e8f0;         /* Highest elevation (slate-200) */
    
    /* === TEXT COLORS === */
    --text-primary: #0f172a;        /* High emphasis text (slate-900) */
    --text-secondary: #334155;      /* Medium emphasis text (slate-700) */
    --text-tertiary: #64748b;       /* Low emphasis text (slate-500) */
    --text-muted: #94a3b8;          /* Disabled/placeholder text (slate-400) */
    
    /* === BORDER COLORS === */
    --border-primary: #e2e8f0;      /* Default borders (slate-200) */
    --border-secondary: #cbd5e1;    /* Subtle borders (slate-300) */
    --border-focus: #3b82f6;        /* Focus borders (blue-500) */
    
    /* === ACCENT COLORS === */
    --accent-primary: #2563eb;      /* Primary blue (blue-600) */
    --accent-primary-hover: #1d4ed8; /* Primary blue hover (blue-700) */
    --accent-primary-light: #3b82f6; /* Primary blue light (blue-500) */
    --accent-bg: #dbeafe;           /* Accent background (blue-100) */
    --accent-bg-hover: #bfdbfe;     /* Accent background hover (blue-200) */
    
    /* === STATE COLORS === */
    --success: #059669;             /* Success green (emerald-600) */
    --success-bg: #d1fae5;          /* Success background (emerald-100) */
    --warning: #d97706;             /* Warning amber (amber-600) */
    --warning-bg: #fef3c7;          /* Warning background (amber-100) */
    --error: #dc2626;               /* Error red (red-600) */
    --error-bg: #fee2e2;            /* Error background (red-100) */
    
    /* === INTERACTIVE STATES === */
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --press-overlay: rgba(0, 0, 0, 0.1);
    --focus-ring: rgba(59, 130, 246, 0.5);
    
    /* === SHADOWS (ELEVATION) === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* === 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 {
    color-scheme: light;
}

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

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

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

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

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

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

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

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

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

/* === BUTTONS & INTERACTIVE ELEMENTS === */
.role-btn,
.task-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    transition: all 0.2s ease-in-out;
}

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

.role-btn.active,
.task-btn.active {
    background-color: var(--accent-bg);
    border-color: var(--accent-primary);
    color: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* === TOOL CARDS === */
.tool-card {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    transition: all 0.2s ease-in-out;
}

.tool-card:hover {
    background-color: var(--bg-primary);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

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

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

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

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

.text-blue-800 {
    color: var(--accent-primary-hover);
}

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

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

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

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

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

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

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

::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

/* === SELECTION STYLING === */
::selection {
    background-color: var(--accent-bg);
    color: var(--accent-primary-hover);
}

/* === HIGH CONTRAST MODE SUPPORT === */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --border-primary: #666666;
        --accent-primary: #0000ff;
    }
}

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