/* ================================================
   variables.css — Tasarım Tokenları & CSS Değişkenleri
   NesneMarket.com
   ================================================ */

:root {
  /* Renkler — Koyu Tema */
  --bg-0:        #03060f;   /* en derin arka plan */
  --bg-1:        #070c1a;   /* sayfa zemini */
  --bg-2:        #0b1225;   /* kartlar */
  --bg-3:        #101930;   /* hover / üst yüzey */
  --bg-4:        #162040;   /* aktif state */

  --border-dim:  rgba(90, 140, 255, 0.10);
  --border-mid:  rgba(90, 140, 255, 0.22);
  --border-glow: rgba(90, 140, 255, 0.45);

  --text-1:   #dce8ff;   /* birincil metin */
  --text-2:   #7a9cd0;   /* ikincil */
  --text-3:   #3d5c8a;   /* pasif / placeholder */

  /* Aksan Renkleri */
  --blue:     #4d9fff;
  --blue-dim: rgba(77, 159, 255, 0.15);
  --blue-glow: rgba(77, 159, 255, 0.40);

  --gold:     #f0c060;
  --gold-dim: rgba(240, 192, 96, 0.15);
  --gold-glow: rgba(240, 192, 96, 0.40);

  --green:    #3dffa0;
  --green-dim: rgba(61, 255, 160, 0.15);

  --red:      #ff3d60;
  --red-dim:  rgba(255, 61, 96, 0.15);

  --purple:   #a066ff;
  --purple-dim: rgba(160, 102, 255, 0.15);

  /* Gradyanlar */
  --grad-blue:   linear-gradient(135deg, #1a4bab, #4d9fff);
  --grad-gold:   linear-gradient(135deg, #7a4e10, #f0c060, #b07820);
  --grad-hero:   radial-gradient(ellipse at 30% 60%, #0e1e40 0%, #070c1a 65%);
  --grad-card:   linear-gradient(180deg, rgba(90,140,255,0.06) 0%, transparent 100%);

  /* Tipografi */
  --font-display: 'Cinzel', serif;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Köşe Radyusu */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Gölgeler */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.55);
  --shadow-glow-blue: 0 0 24px var(--blue-glow);
  --shadow-glow-gold: 0 0 24px var(--gold-glow);

  /* Geçişler */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   all 0.18s var(--ease);
  --t-mid:    all 0.28s var(--ease);
  --t-slow:   all 0.45s var(--ease);

  /* Layout */
  --max-w: 1440px;
  --nav-h: 66px;
  --top-h: 36px;
}

/* ---- Açık Tema ---- */
[data-theme="light"] {
  --bg-0:  #edf2ff;
  --bg-1:  #f0f4ff;
  --bg-2:  #ffffff;
  --bg-3:  #e8eeff;
  --bg-4:  #dce6ff;

  --border-dim:  rgba(60, 100, 220, 0.12);
  --border-mid:  rgba(60, 100, 220, 0.25);
  --border-glow: rgba(60, 100, 220, 0.45);

  --text-1: #0b1630;
  --text-2: #2a4880;
  --text-3: #7a9ac0;

  --blue:  #1a60d0;
  --blue-glow: rgba(26, 96, 208, 0.35);
}

/* ---- Ek CSS Değişkenleri ---- */
:root {
  --purple: #a066ff;
  --purple-dim: rgba(160,102,255,.12);
  --green: #3dffa0;
  --red: #ff3d60;
  --red-dim: rgba(255,61,96,.12);
  --gold: #f0c060;
  --gold-dim: rgba(240,192,96,.12);
  --blue: #4d9fff;
  --blue-dim: rgba(77,159,255,.12);
  --r-full: 9999px;
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 6px;
  --border-dim: rgba(255,255,255,.07);
  --border-mid: rgba(255,255,255,.14);
  --t-fast: all .15s ease;
  --t-mid: all .25s ease;
  --font-display: 'Cinzel', serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --shadow-md: 0 4px 24px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.4);
  --grad-blue: linear-gradient(135deg, #4d9fff 0%, #2563ff 100%);
}

[data-theme="dark"] {
  --bg-0: #040810;
  --bg-1: #06090f;
  --bg-2: #080d18;
  --bg-3: #0c1220;
  --text-1: #e8edf5;
  --text-2: #a0aec0;
  --text-3: #4a5568;
  --max-w: 1200px;
}

[data-theme="light"] {
  --bg-0: #f0f4ff;
  --bg-1: #e8edf8;
  --bg-2: #ffffff;
  --bg-3: #f5f7ff;
  --text-1: #1a202c;
  --text-2: #4a5568;
  --text-3: #718096;
  --border-dim: rgba(0,0,0,.08);
  --border-mid: rgba(0,0,0,.15);
}