/* ========================================
   CSS Variables - MS Eğitim Theme System
   ======================================== */

/* Theme transition optimization */
html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

/* Varsayılan tema - Light Mode */
:root, [data-theme="light"] {
    /* Ana Renkler - Modern Light Theme */
    --primary: #001d84;        /* Ana mavi - Kurumsal ve güçlü */
    --primary-dark: #001560;   /* Ana mavi koyu - Daha derin */
    --primary-light: #0029a8;  /* Ana mavi açık - Daha canlı */
    --secondary: #06b6d4;      /* Cyan-500 - Tamamlayıcı */
    --secondary-dark: #0891b2; /* Cyan-600 - Orta ton */
    
    /* Accent Renkler */
    --accent: #f59e0b;         /* Amber-500 - Sıcak ve modern */
    --accent-light: #fbbf24;   /* Amber-400 - Açık vurgu */
    --accent-dark: #d97706;    /* Amber-600 - Koyu vurgu */
    
    /* Neutral Renkler - Professional Light Theme */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #f8fafc;      /* Çok açık mavi-gri */
    --gray-100: #f1f5f9;     /* Açık mavi-gri */
    --gray-200: #e2e8f0;     /* Açık gri - light theme için uygun */
    --gray-300: #cbd5e1;     /* Orta mavi-gri */
    --gray-400: #94a3b8;     /* Orta-koyu mavi-gri */
    --gray-500: #64748b;     /* Koyu mavi-gri */
    --gray-600: #475569;     /* Daha koyu mavi-gri */
    --gray-700: #334155;     /* Çok koyu mavi-gri */
    --gray-800: #1e293b;     /* Ana renge yakın koyu */
    --gray-900: #0f172a;     /* Ana renge çok yakın */
    
    /* Semantic Renkler - Modern ve Yumuşak */
    --success: #10b981;      /* Emerald-500 - Modern yeşil */
    --warning: var(--accent); /* Amber-500 - Sıcak uyarı */
    --error: #ef4444;        /* Red-500 - Yumuşak kırmızı */
    --info: var(--secondary); /* Cyan-500 - Açık bilgi */
    
    /* Background Alias Renkler */
    --light: #f8fafc;        /* Çok açık gri */
    --dark: var(--gray-900); /* Çok koyu gri */
    
    /* Text Renkler - Light theme için - Modern ve Yumuşak */
    --text: #1f2937;             /* Gray-800 - Ana metin, okunabilir */
    --text-light: #6b7280;       /* Gray-500 - Açıklama metinleri */
    --text-dark: #111827;        /* Gray-900 - Başlık ve vurgu metinleri */
    
    /* Text Renkler - Dark theme için */
    --text-on-dark: #ffffff;      /* Koyu arka planda beyaz text */
    --text-light-on-dark: rgba(255, 255, 255, 0.8);  /* Koyu arka planda açık text */
    --text-dark-on-dark: #f1f5f9; /* Koyu arka planda çok açık text */
    
    /* Background Renkler - Light Theme */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-dark: var(--gray-900);
    --bg-card: var(--white);
    --bg-hover: var(--gray-100);
    
    /* Dropdown Renkler */
    --dropdown-bg: var(--white);
    --dropdown-border: var(--gray-300);
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    
    /* Border Renkler - Light Theme - Modern */
    --border: #e5e7eb;          /* Gray-200 - Çok yumuşak */
    --border-light: var(--gray-100);
    --border-dark: var(--gray-300);
    --border-radius: 12px;
    
    /* Shadow Renkler - Modern ve yumuşak gölgeler */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Gradient Renkler */
    --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-light));
    --gradient-secondary: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* Legacy Alias */
    --border-radius: 12px;  /* Welcome.blade.php için uyumluluk */
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    /* Typography - Türkçe eğitim platformları için optimize edilmiş fontlar */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Z-Index */
    --z-dropdown: 1000;
    --z-header: 1010;
    --z-modal: 1020;
    --z-tooltip: 1030;
}

/* REMOVED: prefers-color-scheme dark - Bu light tema'yı bozuyordu! */

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-xl);
    }
}

/* ========================================
   PROFESSIONAL DARK THEME SYSTEM
   ======================================== */

[data-theme="dark"] {
    /* Ana Renkler - Consistent with light theme */
    --primary: #3b82f6;        /* Blue-500 - better contrast on dark */
    --primary-dark: #1e40af;   /* Blue-800 */
    --primary-light: #60a5fa;  /* Blue-400 */
    --secondary: #06b6d4;      /* Cyan-500 */
    --secondary-dark: #0891b2; /* Cyan-600 */
    
    /* Accent Renkler */
    --accent: #f59e0b;         /* Amber-500 */
    --accent-light: #fbbf24;   /* Amber-400 */
    --accent-dark: #d97706;    /* Amber-600 */
    
    /* Semantic Renkler */
    --success: #10b981;        /* Emerald-500 */
    --warning: #f59e0b;        /* Amber-500 */
    --error: #ef4444;          /* Red-500 */
    --info: #06b6d4;           /* Cyan-500 */
    
    /* DARK THEME BACKGROUND SYSTEM */
    --white: #ffffff;          /* White stays white for text */
    --black: #000000;          /* Black stays black */
    
    /* Dark Theme Neutral Scale */
    --gray-50: #f8fafc;        /* Light gray for text */
    --gray-100: #f1f5f9;       /* Light gray */
    --gray-200: #e2e8f0;       /* Light gray */
    --gray-300: #cbd5e1;       /* Medium gray */
    --gray-400: #94a3b8;       /* Medium gray */
    --gray-500: #64748b;       /* Medium gray */
    --gray-600: #475569;       /* Dark gray */
    --gray-700: #334155;       /* Darker gray */
    --gray-800: #1e293b;       /* Very dark gray */
    --gray-900: #0f172a;       /* Darkest gray for backgrounds */
    
    /* DARK THEME TEXT COLORS */
    --text: #e2e8f0;           /* Light gray - primary text */
    --text-light: #94a3b8;     /* Medium gray - secondary text */
    --text-dark: #ffffff;      /* White - headings */
    
    /* DARK THEME BACKGROUND COLORS */
    --bg-primary: #0f172a;     /* Very dark - main background */
    --bg-secondary: #1e293b;   /* Dark - card/section background */
    --bg-card: #1e293b;        /* Dark - card background */
    --bg-hover: #334155;       /* Medium dark - hover states */
    
    /* BORDER SYSTEM */
    --border: #334155;         /* Slate-700 - subtle borders */
    --border-light: #1e293b;   /* Slate-800 - light borders */
    --border-dark: #475569;    /* Slate-600 - strong borders */
    
    /* DROPDOWN SYSTEM */
    --dropdown-bg: #1e293b;
    --dropdown-border: #334155;
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    
    /* SHADOW SYSTEM - Enhanced for dark theme */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
    
    /* GRADIENT SYSTEM */
    --gradient-primary: linear-gradient(135deg, #3b82f6, #1e40af);
    --gradient-secondary: linear-gradient(135deg, #06b6d4, #0891b2);
    --gradient-accent: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Ek CSS değişkenleri admin kurslar sayfası için */
:root, [data-theme="light"] {
    /* Glass effect and gradients */
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    /* Text semantic aliases */
    --text-primary: var(--text);
    --text-secondary: var(--text-light);
}

[data-theme="dark"] {
    /* Glass effect for dark theme */
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    
    /* Text semantic aliases */
    --text-primary: var(--text);
    --text-secondary: var(--text-light);
}