/* =============================================
   TEMA SİSTEMİ - CSS Custom Properties
   ============================================= */

/* Varsayılan: Karanlık Mor Tema */
:root {
    /* Ana Arka Planlar */
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #111118;
    --color-bg-card: #18181f;
    --color-bg-card-hover: #21212c;
    --color-bg-input: #111118;
    --color-bg-sidebar: #0e0e15;
    --color-bg-player: #111118;
    --color-bg-topbar: #111118;

    /* Vurgu Renkleri - Tema Değişkeni */
    --color-accent: #7c5cf5;
    --color-accent-hover: #9070ff;
    --color-accent-muted: rgba(124, 92, 245, 0.15);
    --color-accent-glow: rgba(124, 92, 245, 0.3);

    /* Platform Renkleri */
    --color-accent-spotify: #1DB954;
    --color-accent-spotify-hover: #1ed760;
    --color-accent-youtube: #FF0000;
    --color-accent-youtube-hover: #ff3333;
    --color-accent-soundcloud: #ff5500;
    --color-accent-primary: var(--color-accent);
    --color-accent-primary-hover: var(--color-accent-hover);

    /* Metin */
    --color-text-primary: #f0f0f5;
    --color-text-secondary: #9a9ab0;
    --color-text-muted: #5a5a70;

    /* Kenarlıklar */
    --color-border: #222230;
    --color-border-light: #2e2e40;

    /* Durum Renkleri */
    --color-success: #2ecc71;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;

    /* Fontlar */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Köşe Yuvarlaklığı */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Gölgeler */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 24px var(--color-accent-glow);
    --shadow-glow-spotify: 0 0 20px rgba(29, 185, 84, 0.3);
    --shadow-glow-youtube: 0 0 20px rgba(255, 0, 0, 0.3);
    --shadow-glow-primary: 0 0 20px var(--color-accent-glow);

    /* Geçişler */
    --transition-fast: 120ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-modal: 200;
    --z-notification: 300;
    --z-tooltip: 400;

    /* Layout */
    --sidebar-width: 300px;
    --player-height: 88px;
    --topbar-height: 60px;
}

/* =============================================
   AÇIK MOD - Temel
   ============================================= */
[data-theme="light"] {
    /* Arka Planlar - belirgin katmanlar */
    --color-bg-primary: #eceef6;
    --color-bg-secondary: #f5f6fc;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #e4e7f8;
    --color-bg-input: #f0f1f9;
    --color-bg-sidebar: #f2f3fb;
    --color-bg-player: #ffffff;
    --color-bg-topbar: rgba(255,255,255,0.97);

    /* Metin - yuksek kontrast */
    --color-text-primary: #12122a;
    --color-text-secondary: #40406a;
    --color-text-muted: #7878a0;

    /* Kenarliklar */
    --color-border: #d4d7ed;
    --color-border-light: #e6e8f4;

    /* Golge - derinlik hissi */
    --shadow-sm: 0 1px 3px rgba(0,0,60,0.07), 0 2px 6px rgba(0,0,60,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,60,0.10), 0 1px 4px rgba(0,0,60,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,60,0.14), 0 3px 10px rgba(0,0,60,0.08);
}

/* =============================================
   RENK PALETLERİ - Koyu Mod
   ============================================= */

/* Mor (varsayılan) */
[data-theme="dark"][data-accent="purple"],
[data-accent="purple"] {
    --color-accent: #7c5cf5;
    --color-accent-hover: #9070ff;
    --color-accent-muted: rgba(124, 92, 245, 0.15);
    --color-accent-glow: rgba(124, 92, 245, 0.3);
}

/* Yeşil */
[data-theme="dark"][data-accent="green"],
[data-accent="green"] {
    --color-accent: #00c853;
    --color-accent-hover: #00e676;
    --color-accent-muted: rgba(0, 200, 83, 0.15);
    --color-accent-glow: rgba(0, 200, 83, 0.3);
}

/* Mavi */
[data-theme="dark"][data-accent="blue"],
[data-accent="blue"] {
    --color-accent: #2979ff;
    --color-accent-hover: #448aff;
    --color-accent-muted: rgba(41, 121, 255, 0.15);
    --color-accent-glow: rgba(41, 121, 255, 0.3);
}

/* Gri/Beyaz */
[data-theme="dark"][data-accent="gray"],
[data-accent="gray"] {
    --color-accent: #b0b0c8;
    --color-accent-hover: #d0d0e8;
    --color-accent-muted: rgba(176, 176, 200, 0.15);
    --color-accent-glow: rgba(176, 176, 200, 0.2);
}

/* Kırmızı */
[data-theme="dark"][data-accent="red"],
[data-accent="red"] {
    --color-accent: #ff4757;
    --color-accent-hover: #ff6b81;
    --color-accent-muted: rgba(255, 71, 87, 0.15);
    --color-accent-glow: rgba(255, 71, 87, 0.3);
}

/* Turuncu */
[data-theme="dark"][data-accent="orange"],
[data-accent="orange"] {
    --color-accent: #ff7f00;
    --color-accent-hover: #ffa040;
    --color-accent-muted: rgba(255, 127, 0, 0.15);
    --color-accent-glow: rgba(255, 127, 0, 0.3);
}

/* =============================================
   AÇIK MOD RENK PALETLERİ
   ============================================= */
[data-theme="light"][data-accent="purple"] {
    --color-accent: #6c5ce7;
    --color-accent-hover: #7f71ea;
    --color-accent-muted: rgba(108, 92, 231, 0.12);
    --color-accent-glow: rgba(108, 92, 231, 0.25);
}

[data-theme="light"][data-accent="green"] {
    --color-accent: #00a844;
    --color-accent-hover: #00c853;
    --color-accent-muted: rgba(0, 168, 68, 0.12);
    --color-accent-glow: rgba(0, 168, 68, 0.25);
}

[data-theme="light"][data-accent="blue"] {
    --color-accent: #1a73e8;
    --color-accent-hover: #2979ff;
    --color-accent-muted: rgba(26, 115, 232, 0.12);
    --color-accent-glow: rgba(26, 115, 232, 0.25);
}

[data-theme="light"][data-accent="gray"] {
    --color-accent: #666688;
    --color-accent-hover: #8888aa;
    --color-accent-muted: rgba(102, 102, 136, 0.12);
    --color-accent-glow: rgba(102, 102, 136, 0.2);
}

[data-theme="light"][data-accent="red"] {
    --color-accent: #e53935;
    --color-accent-hover: #f44336;
    --color-accent-muted: rgba(229, 57, 53, 0.12);
    --color-accent-glow: rgba(229, 57, 53, 0.25);
}

[data-theme="light"][data-accent="orange"] {
    --color-accent: #e65100;
    --color-accent-hover: #f57c00;
    --color-accent-muted: rgba(230, 81, 0, 0.12);
    --color-accent-glow: rgba(230, 81, 0, 0.25);
}