/*
 * Konwerter SF - System Skórek / Themes
 * =====================================
 * Każdy motyw definiuje własny zestaw kolorów poprzez CSS Custom Properties
 */

/* ============================================
   1. TEAL (Domyślny) - Turkusowo-zielony
   ============================================ */
[data-theme="teal"], :root {
    --theme-primary: #0d9488;
    --theme-primary-light: #14b8a6;
    --theme-primary-dark: #0f766e;
    --theme-primary-rgb: 13, 148, 136;

    --theme-secondary: #64748b;
    --theme-secondary-light: #94a3b8;
    --theme-secondary-dark: #475569;

    --theme-accent: #06b6d4;
    --theme-accent-light: #22d3ee;

    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #3b82f6;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f0fdfa;
    --theme-bg-tertiary: #ccfbf1;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-text-inverse: #ffffff;

    --theme-border: #e2e8f0;
    --theme-border-light: #f1f5f9;

    --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    --theme-gradient-soft: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
}

/* ============================================
   2. OCEAN - Niebieski
   ============================================ */
[data-theme="ocean"] {
    --theme-primary: #2563eb;
    --theme-primary-light: #3b82f6;
    --theme-primary-dark: #1d4ed8;
    --theme-primary-rgb: 37, 99, 235;

    --theme-secondary: #64748b;
    --theme-secondary-light: #94a3b8;
    --theme-secondary-dark: #475569;

    --theme-accent: #06b6d4;
    --theme-accent-light: #22d3ee;

    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #0ea5e9;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #eff6ff;
    --theme-bg-tertiary: #dbeafe;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-text-inverse: #ffffff;

    --theme-border: #e2e8f0;
    --theme-border-light: #f1f5f9;

    --theme-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -2px rgba(37, 99, 235, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(37, 99, 235, 0.1);

    --theme-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --theme-gradient-soft: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

/* ============================================
   3. PURPLE - Fioletowy
   ============================================ */
[data-theme="purple"] {
    --theme-primary: #7c3aed;
    --theme-primary-light: #8b5cf6;
    --theme-primary-dark: #6d28d9;
    --theme-primary-rgb: 124, 58, 237;

    --theme-secondary: #64748b;
    --theme-secondary-light: #94a3b8;
    --theme-secondary-dark: #475569;

    --theme-accent: #ec4899;
    --theme-accent-light: #f472b6;

    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #3b82f6;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #faf5ff;
    --theme-bg-tertiary: #f3e8ff;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #1e1b4b;
    --theme-text-secondary: #4c1d95;
    --theme-text-muted: #6b7280;
    --theme-text-inverse: #ffffff;

    --theme-border: #e9d5ff;
    --theme-border-light: #f5f3ff;

    --theme-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1), 0 2px 4px -2px rgba(124, 58, 237, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(124, 58, 237, 0.15), 0 4px 6px -4px rgba(124, 58, 237, 0.1);

    --theme-gradient: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --theme-gradient-soft: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
}

/* ============================================
   4. SUNSET - Pomarańczowo-czerwony
   ============================================ */
[data-theme="sunset"] {
    --theme-primary: #ea580c;
    --theme-primary-light: #f97316;
    --theme-primary-dark: #c2410c;
    --theme-primary-rgb: 234, 88, 12;

    --theme-secondary: #78716c;
    --theme-secondary-light: #a8a29e;
    --theme-secondary-dark: #57534e;

    --theme-accent: #dc2626;
    --theme-accent-light: #ef4444;

    --theme-success: #16a34a;
    --theme-warning: #eab308;
    --theme-error: #dc2626;
    --theme-info: #0284c7;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #fff7ed;
    --theme-bg-tertiary: #ffedd5;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #292524;
    --theme-text-secondary: #57534e;
    --theme-text-muted: #78716c;
    --theme-text-inverse: #ffffff;

    --theme-border: #fed7aa;
    --theme-border-light: #fef3c7;

    --theme-shadow: 0 4px 6px -1px rgba(234, 88, 12, 0.1), 0 2px 4px -2px rgba(234, 88, 12, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(234, 88, 12, 0.15), 0 4px 6px -4px rgba(234, 88, 12, 0.1);

    --theme-gradient: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
    --theme-gradient-soft: linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%);
}

/* ============================================
   5. FOREST - Zielony
   ============================================ */
[data-theme="forest"] {
    --theme-primary: #16a34a;
    --theme-primary-light: #22c55e;
    --theme-primary-dark: #15803d;
    --theme-primary-rgb: 22, 163, 74;

    --theme-secondary: #57534e;
    --theme-secondary-light: #78716c;
    --theme-secondary-dark: #44403c;

    --theme-accent: #84cc16;
    --theme-accent-light: #a3e635;

    --theme-success: #22c55e;
    --theme-warning: #eab308;
    --theme-error: #dc2626;
    --theme-info: #0891b2;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f0fdf4;
    --theme-bg-tertiary: #dcfce7;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #14532d;
    --theme-text-secondary: #166534;
    --theme-text-muted: #4b5563;
    --theme-text-inverse: #ffffff;

    --theme-border: #bbf7d0;
    --theme-border-light: #dcfce7;

    --theme-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.1), 0 2px 4px -2px rgba(22, 163, 74, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(22, 163, 74, 0.15), 0 4px 6px -4px rgba(22, 163, 74, 0.1);

    --theme-gradient: linear-gradient(135deg, #16a34a 0%, #84cc16 100%);
    --theme-gradient-soft: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%);
}

/* ============================================
   6. DARK - Ciemny motyw
   ============================================ */
[data-theme="dark"] {
    --theme-primary: #14b8a6;
    --theme-primary-light: #2dd4bf;
    --theme-primary-dark: #0d9488;
    --theme-primary-rgb: 20, 184, 166;

    --theme-secondary: #94a3b8;
    --theme-secondary-light: #cbd5e1;
    --theme-secondary-dark: #64748b;

    --theme-accent: #22d3ee;
    --theme-accent-light: #67e8f9;

    --theme-success: #34d399;
    --theme-warning: #fbbf24;
    --theme-error: #f87171;
    --theme-info: #60a5fa;

    --theme-bg-primary: #0f172a;
    --theme-bg-secondary: #1e293b;
    --theme-bg-tertiary: #334155;
    --theme-bg-card: #1e293b;

    --theme-text-primary: #f1f5f9;
    --theme-text-secondary: #cbd5e1;
    --theme-text-muted: #94a3b8;
    --theme-text-inverse: #0f172a;

    --theme-border: #334155;
    --theme-border-light: #475569;

    --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    --theme-gradient: linear-gradient(135deg, #14b8a6 0%, #22d3ee 100%);
    --theme-gradient-soft: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* ============================================
   7. ROSE - Różowy
   ============================================ */
[data-theme="rose"] {
    --theme-primary: #e11d48;
    --theme-primary-light: #f43f5e;
    --theme-primary-dark: #be123c;
    --theme-primary-rgb: 225, 29, 72;

    --theme-secondary: #71717a;
    --theme-secondary-light: #a1a1aa;
    --theme-secondary-dark: #52525b;

    --theme-accent: #ec4899;
    --theme-accent-light: #f472b6;

    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #3b82f6;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #fff1f2;
    --theme-bg-tertiary: #ffe4e6;
    --theme-bg-card: #ffffff;

    --theme-text-primary: #1c1917;
    --theme-text-secondary: #44403c;
    --theme-text-muted: #78716c;
    --theme-text-inverse: #ffffff;

    --theme-border: #fecdd3;
    --theme-border-light: #ffe4e6;

    --theme-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.1), 0 2px 4px -2px rgba(225, 29, 72, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(225, 29, 72, 0.15), 0 4px 6px -4px rgba(225, 29, 72, 0.1);

    --theme-gradient: linear-gradient(135deg, #e11d48 0%, #ec4899 100%);
    --theme-gradient-soft: linear-gradient(135deg, #fff1f2 0%, #fdf2f8 100%);
}

/* ============================================
   8. MIDNIGHT - Ciemny niebieski
   ============================================ */
[data-theme="midnight"] {
    --theme-primary: #6366f1;
    --theme-primary-light: #818cf8;
    --theme-primary-dark: #4f46e5;
    --theme-primary-rgb: 99, 102, 241;

    --theme-secondary: #94a3b8;
    --theme-secondary-light: #cbd5e1;
    --theme-secondary-dark: #64748b;

    --theme-accent: #a78bfa;
    --theme-accent-light: #c4b5fd;

    --theme-success: #34d399;
    --theme-warning: #fbbf24;
    --theme-error: #f87171;
    --theme-info: #60a5fa;

    --theme-bg-primary: #0f0f23;
    --theme-bg-secondary: #1a1a2e;
    --theme-bg-tertiary: #16213e;
    --theme-bg-card: #1a1a2e;

    --theme-text-primary: #e2e8f0;
    --theme-text-secondary: #94a3b8;
    --theme-text-muted: #64748b;
    --theme-text-inverse: #0f0f23;

    --theme-border: #334155;
    --theme-border-light: #475569;

    --theme-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2), 0 2px 4px -2px rgba(99, 102, 241, 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgba(99, 102, 241, 0.3), 0 4px 6px -4px rgba(99, 102, 241, 0.2);

    --theme-gradient: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
    --theme-gradient-soft: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}