/* ============================================================
   assets/css/veriables.css — CSS Custom Properties
   ============================================================ */

:root {
  /* Ana Renkler */
  --primary:        #7c3aed;
  --primary-dark:   #5b21b6;
  --primary-light:  #a78bfa;
  --primary-glow:   rgba(124,58,237,0.25);

  --accent:         #06b6d4;
  --accent-dark:    #0891b2;
  --accent-glow:    rgba(6,182,212,0.2);

  --gold:           #f59e0b;
  --gold-light:     #fcd34d;

  /* Durum Renkleri */
  --success:        #10b981;
  --success-bg:     rgba(16,185,129,0.12);
  --success-border: rgba(16,185,129,0.3);

  --danger:         #ef4444;
  --danger-bg:      rgba(239,68,68,0.12);
  --danger-border:  rgba(239,68,68,0.3);

  --warning:        #f59e0b;
  --warning-bg:     rgba(245,158,11,0.12);
  --warning-border: rgba(245,158,11,0.3);

  --info:           #06b6d4;
  --info-bg:        rgba(6,182,212,0.12);
  --info-border:    rgba(6,182,212,0.3);

  --secondary:      #475569;
  --secondary-bg:   rgba(71,85,105,0.2);
  --secondary-border: rgba(71,85,105,0.3);

  /* Arkaplan Katmanları */
  --bg-base:        #0a0a0f;
  --bg-2:           #0f0f18;
  --bg-3:           #111118;
  --bg-card:        #1a1a28;
  --bg-card-2:      #1e1e2e;
  --bg-card-3:      #252535;
  --bg-hover:       rgba(124,58,237,0.08);

  /* Metin */
  --text-1:         #f1f5f9;
  --text-2:         #cbd5e1;
  --text-3:         #94a3b8;
  --text-4:         #64748b;
  --text-5:         #475569;

  /* Border */
  --border-1:       rgba(124,58,237,0.25);
  --border-2:       rgba(255,255,255,0.07);
  --border-3:       rgba(255,255,255,0.04);

  /* Platform Renkleri */
  --tw-color:  #1d9bf0;
  --fb-color:  #1877f2;
  --ig-color:  #e1306c;
  --tg-color:  #0088cc;
  --pt-color:  #e60023;
  --yt-color:  #ff0000;
  --wa-color:  #25d366;

  /* Boyut & Boşluk */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-sans:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'Consolas', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;
  --font-black:   800;

  /* Gölge */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow:     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 rgba(124,58,237,0.3);

  /* Geçiş */
  --transition:      all 0.2s ease;
  --transition-slow: all 0.35s ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-header:   300;
  --z-modal:    400;
  --z-toast:    500;

  /* Panel Sidebar */
  --sidebar-w:           260px;
  --sidebar-w-collapsed: 68px;
  --header-h:            64px;

  color-scheme: dark;
}

/* Açık tema: işletim sistemi / tarayıcı tercihi (önyüz + panel değişkenlerini kullanır) */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --primary-glow:   rgba(124, 58, 237, 0.12);
    --accent-glow:    rgba(6, 182, 212, 0.1);

    --bg-base:        #f8fafc;
    --bg-2:           #f1f5f9;
    --bg-3:           #e2e8f0;
    --bg-card:        #ffffff;
    --bg-card-2:      #ffffff;
    --bg-card-3:      #f8fafc;
    --bg-hover:       rgba(124, 58, 237, 0.08);

    --text-1:         #0f172a;
    --text-2:         #334155;
    --text-3:         #475569;
    --text-4:         #64748b;
    --text-5:         #94a3b8;

    --border-1:       rgba(124, 58, 237, 0.22);
    --border-2:       rgba(15, 23, 42, 0.08);
    --border-3:       rgba(15, 23, 42, 0.05);

    --shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow:     0 4px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg:  0 12px 40px rgba(15, 23, 42, 0.1);
    --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.15);
  }
}