/* ===================================
   Y.fr - Theme System (Multi-thèmes)
   Professional & Creative Colors
   =================================== */

:root {
    /* Primary - Bleu professionnel */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #60a5fa;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   Light Theme (Default)
   =================================== */
[data-theme="light"],
:root {
    /* Couleurs principales */
    --color-primary: var(--primary-600);
    --color-primary-hover: var(--primary-700);
    --color-primary-light: var(--primary-100);
    
    /* Background */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-hover: #e5e7eb;
    
    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #0f172a;
    
    /* Border */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --border-focus: var(--primary-500);
    
    /* Shadows */
    --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);
    
    /* Status colors */
    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-error: #ef4444;
    --color-error-bg: #fee2e2;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-info: #3b82f6;
    --color-info-bg: #dbeafe;
    
    /* Code blocks */
    --code-bg: #f3f4f6;
    --code-text: #1f2937;
    --code-border: #e5e7eb;
}

/* ===================================
   Dark Theme
   =================================== */
[data-theme="dark"] {
    /* Couleurs principales */
    --color-primary: var(--primary-500);
    --color-primary-hover: var(--primary-400);
    --color-primary-light: rgba(59, 130, 246, 0.1);
    
    /* Background */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: #475569;
    
    /* Text */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    
    /* Border */
    --border-primary: #334155;
    --border-secondary: #475569;
    --border-focus: var(--primary-500);
    
    /* Shadows */
    --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);
    
    /* Status colors - Plus clairs en dark mode */
    --color-success: #34d399;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-error: #f87171;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-info: #60a5fa;
    --color-info-bg: rgba(59, 130, 246, 0.1);
    
    /* Code blocks */
    --code-bg: #1e293b;
    --code-text: #e2e8f0;
    --code-border: #334155;
}

/* ===================================
   Ocean Theme (Professionnel - Bleu océan)
   =================================== */
[data-theme="ocean"] {
    /* Couleurs principales - Bleu océan profond */
    --color-primary: #0284c7;
    --color-primary-hover: #0369a1;
    --color-primary-light: rgba(2, 132, 199, 0.1);
    
    /* Background - Tons bleu clair */
    --bg-primary: #f0f9ff;
    --bg-secondary: #e0f2fe;
    --bg-tertiary: #bae6fd;
    --bg-hover: #7dd3fc;
    
    /* Text - Bleu foncé océan */
    --text-primary: #0c4a6e;
    --text-secondary: #075985;
    --text-tertiary: #0369a1;
    --text-inverse: #ffffff;
    
    /* Border - Bleu ciel */
    --border-primary: #7dd3fc;
    --border-secondary: #38bdf8;
    --border-focus: #0284c7;
    
    /* Shadows - Nuances bleues */
    --shadow-sm: 0 1px 2px 0 rgba(2, 132, 199, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(2, 132, 199, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(2, 132, 199, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(2, 132, 199, 0.25);
    
    /* Status colors - Adaptés au bleu */
    --color-success: #0d9488;
    --color-success-bg: #ccfbf1;
    --color-error: #dc2626;
    --color-error-bg: #fee2e2;
    --color-warning: #ea580c;
    --color-warning-bg: #fed7aa;
    --color-info: #0284c7;
    --color-info-bg: #e0f2fe;
    
    /* Code blocks */
    --code-bg: #e0f2fe;
    --code-text: #0c4a6e;
    --code-border: #bae6fd;
}

/* ===================================
   Forest Theme (Professionnel - Vert forêt)
   =================================== */
[data-theme="forest"] {
    /* Couleurs principales - Vert forêt */
    --color-primary: #059669;
    --color-primary-hover: #047857;
    --color-primary-light: rgba(5, 150, 105, 0.1);
    
    /* Background - Tons vert nature */
    --bg-primary: #f0fdf4;
    --bg-secondary: #dcfce7;
    --bg-tertiary: #bbf7d0;
    --bg-hover: #86efac;
    
    /* Text - Vert foncé forêt */
    --text-primary: #14532d;
    --text-secondary: #166534;
    --text-tertiary: #15803d;
    --text-inverse: #ffffff;
    
    /* Border - Vert clair */
    --border-primary: #86efac;
    --border-secondary: #4ade80;
    --border-focus: #059669;
    
    /* Shadows - Nuances vertes */
    --shadow-sm: 0 1px 2px 0 rgba(5, 150, 105, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(5, 150, 105, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(5, 150, 105, 0.2);
    --shadow-xl: 0 20px 25px -5px rgba(5, 150, 105, 0.25);
    
    /* Status colors - Palette naturelle */
    --color-success: #16a34a;
    --color-success-bg: #dcfce7;
    --color-error: #dc2626;
    --color-error-bg: #fee2e2;
    --color-warning: #ca8a04;
    --color-warning-bg: #fef3c7;
    --color-info: #0891b2;
    --color-info-bg: #cffafe;
    
    /* Code blocks */
    --code-bg: #dcfce7;
    --code-text: #14532d;
    --code-border: #bbf7d0;
}

/* ===================================
   Chaos Theme (Expérimental - Couleurs aléatoires)
   =================================== */
[data-theme="chaos"] {
    /* Couleurs principales - Violet/Magenta psychédélique */
    --color-primary: #a21caf;
    --color-primary-hover: #c026d3;
    --color-primary-light: rgba(162, 28, 175, 0.15);
    
    /* Background - Jaune/Vert fluo */
    --bg-primary: #fef9c3;
    --bg-secondary: #fef08a;
    --bg-tertiary: #fde047;
    --bg-hover: #facc15;
    
    /* Text - Orange/Rouge vif */
    --text-primary: #9a3412;
    --text-secondary: #c2410c;
    --text-tertiary: #ea580c;
    --text-inverse: #ffffff;
    
    /* Border - Cyan électrique */
    --border-primary: #06b6d4;
    --border-secondary: #0891b2;
    --border-focus: #a21caf;
    
    /* Shadows - Magenta/Violet */
    --shadow-sm: 0 1px 2px 0 rgba(162, 28, 175, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(162, 28, 175, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(162, 28, 175, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(162, 28, 175, 0.6);
    
    /* Status colors - Palette psychédélique */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.2);
    --color-error: #f43f5e;
    --color-error-bg: rgba(244, 63, 94, 0.2);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.2);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.2);
    
    /* Code blocks */
    --code-bg: #fde047;
    --code-text: #9a3412;
    --code-border: #06b6d4;
}

/* ===================================
   Theme Toggle Button
   =================================== */
.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    z-index: 1000;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--shadow-xl);
}

/* ===================================
   Base Styles avec thème
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color var(--transition-base), color var(--transition-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar pour dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Selection */
::selection {
    background: var(--color-primary);
    color: var(--text-inverse);
}

/* Smooth transitions pour tous les éléments thématiques */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--transition-base);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Désactiver les transitions sur les éléments interactifs */
button,
a,
input,
textarea,
select {
    transition-property: background-color, border-color, color, transform, box-shadow;
}

/* ===================================
   Utility Classes
   =================================== */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }

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

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

.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); }

/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    .theme-toggle {
        width: 48px;
        height: 48px;
        bottom: 16px;
        right: 16px;
        font-size: 20px;
    }
}