/* Kaynak: tasarım ajanının tokens.css dosyası (Desktop/VoxnupTasarimAjani).
   Değişiklik orada yapılır, buraya birebir kopyalanır. */

/* Voxnup tasarım token'ları — tek kaynak.
   Tema: <html data-theme="light"> veya "dracula"; öznitelik yoksa koyu (varsayılan, theme_id 0).
   theme_id eşlemesi: 0 = koyu, 1 = açık, 2 = dracula. */

:root {
  /* Yüzeyler: çerçeve en dipte, paneller üstünde, raise etkileşimli/seçili */
  --frame: #0c0d0f;
  --panel: #15171a;
  --panel-2: #1b1d21;
  --raise: #24272c;
  --raise-2: #2d3137;
  --line: #26292e;
  --hover: rgba(255, 255, 255, .02);

  /* Metin */
  --text: #eceef1;
  --text-body: #d6d9de;
  --text-2: #9196a0;
  --text-3: #5d626b;

  /* Vurgu ve anlam renkleri; *-soft = aynı rengin zemin tonu */
  --green: #5ec48f;
  --green-soft: rgba(94, 196, 143, .10);
  --green-line: rgba(94, 196, 143, .42);
  --on-green: #0d2a1c;
  --green-deep: var(--on-green);
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, .13);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, .14);
  --gold: #f5b301;
  --gold-soft: rgba(245, 179, 1, .13);
  --gold-wash: rgba(245, 179, 1, .05);
  --orange: #f97316;
  --orange-soft: rgba(249, 115, 22, .13);
  --pink: #ec4899;
  --pink-soft: rgba(236, 72, 153, .14);
  --on-color: #fff;

  /* Gölge: sm menü, popover, araç çubuğu · lg modal */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .6);

  /* Yazı */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font: "Geist", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;

  /* ÖLÇEKLER — bileşenlerde ham px yazılmaz, yalnızca bunlar kullanılır.
     Ham px'e yalnızca şunlarda izin var: 1px çizgiler, 2–3px halkalar/odak,
     ikon ve nokta boyutları (4'ün katı), panel genişlikleri, konumlandırma kaydırmaları. */

  /* Köşe: rozet/etiket sm · düğme, satır, giriş md · kart, panel, popover lg · logo, modal xl */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Yazı: xs rozet/zaman · sm ikincil · md alt yazı · base gövde · lg bölüm başlığı · xl panel başlığı · 2xl/3xl sayfa başlığı */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* Kontrol yüksekliği: xs mesaj araçları · sm küçük ikon düğmesi · md ikon düğmesi, sekme · lg ana düğme, arama · xl ray öğesi */
  --h-xs: 28px;
  --h-sm: 32px;
  --h-md: 36px;
  --h-lg: 40px;
  --h-xl: 44px;

  /* Avatar: xs yığın/mini · sm ses odası satırı · md üye listesi · lg sohbet satırı, mesaj · xl ray · 2xl profil önizleme */
  --av-xs: 20px;
  --av-sm: 24px;
  --av-md: 32px;
  --av-lg: 40px;
  --av-xl: 44px;
  --av-2xl: 48px;

  /* Boşluk: 4'lük ızgara; half yalnızca liste öğeleri arası mikro boşluk */
  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --frame: #e8eaee;
  --panel: #ffffff;
  --panel-2: #f4f5f7;
  --raise: #eaecf0;
  --raise-2: #dfe2e7;
  --line: #e1e4e9;
  --hover: rgba(15, 18, 24, .025);

  --text: #15171a;
  --text-body: #2a2d33;
  --text-2: #5a606a;
  --text-3: #8b919b;

  --green: #2f9d68;
  --green-soft: rgba(47, 157, 104, .11);
  --green-line: rgba(47, 157, 104, .45);
  --on-green: #ffffff;
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, .10);
  --red: #dc2626;
  --red-soft: rgba(220, 38, 38, .10);
  --gold: #b7860b;
  --gold-soft: rgba(202, 150, 12, .14);
  --gold-wash: rgba(202, 150, 12, .07);
  --orange: #e2560b;
  --orange-soft: rgba(234, 88, 12, .11);
  --pink: #db2777;
  --pink-soft: rgba(219, 39, 119, .10);

  --shadow-sm: 0 8px 24px rgba(20, 24, 32, .14);
  --shadow-lg: 0 24px 64px rgba(20, 24, 32, .2);

  color-scheme: light;
}

:root[data-theme="dracula"] {
  --frame: #1d1e27;
  --panel: #282a36;
  --panel-2: #2f3141;
  --raise: #383a4c;
  --raise-2: #44475a;
  --line: #3a3d50;
  --hover: rgba(255, 255, 255, .025);

  --text: #f8f8f2;
  --text-body: #e2e2dc;
  --text-2: #a9aecb;
  --text-3: #6272a4;

  --green: #50fa7b;
  --green-soft: rgba(80, 250, 123, .10);
  --green-line: rgba(80, 250, 123, .40);
  --on-green: #1d1e27;
  --blue: #bd93f9;
  --blue-soft: rgba(189, 147, 249, .14);
  --red: #ff5555;
  --red-soft: rgba(255, 85, 85, .14);
  --gold: #f1fa8c;
  --gold-soft: rgba(241, 250, 140, .12);
  --gold-wash: rgba(241, 250, 140, .05);
  --orange: #ffb86c;
  --orange-soft: rgba(255, 184, 108, .13);
  --pink: #ff79c6;
  --pink-soft: rgba(255, 121, 198, .14);

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);

  color-scheme: dark;
}