/* TEMA: arayüzün görsel anahtarları. Değerler ortak tasarım sisteminden (tokens.css = Design.md) gelir;
   burada yalnızca Plutus'un anahtarları o token'lara bağlanır. stil.css içinde çıplak renk, piksel ya da
   font adı yazılmaz; hepsi buradaki bir anahtara bağlanır. Açık / koyu tema tokens.css'te (light-dark). */
:root {
  /* Renkler (D · Nane, tokens.override.css: vurgu metin renginde; yeşil grafik ve olumlu, kırmızı aşım) */
  --grafik: var(--chart);
  --grafik-iz: var(--chart-2);
  --zemin: var(--bg);
  --kart: var(--surface);
  --kart-2: var(--surface-2);
  --yazi: var(--text);
  --soluk: var(--text-muted);
  --cizgi: var(--border);
  --vurgu: var(--accent);
  --vurgu-yazi: var(--on-accent);
  --olumlu: var(--success); /* para girişi, iyi durum */
  --uyari-renk: var(--warning);
  --hata-renk: var(--danger);
  --perde: rgb(0 0 0 / 0.45); /* açılan pencerenin arkasını karartan katman */
  --diger: var(--other);
  --oran-cubuk: var(--ratio-bar);
  --parlak-ustu: var(--on-bright);
  --odaksiz: var(--bar-muted);
  --odaksiz-kalan: var(--bar-muted-rest);
  --odaksiz-asan: var(--bar-muted-over);

  /* Yazı */
  --font: var(--font-sans);
  --yazi-boyut: var(--fs-md);
  --yazi-giris: var(--fs-base); /* yazı alanları: iPhone 16 px'in altında yakınlaştırır */
  --yazi-kucuk: var(--fs-xs);
  --yazi-orta: var(--fs-sm);
  --yazi-baslik: var(--fs-xl);
  --yazi-alt-baslik: var(--fs-lg);
  --yazi-sayi: var(--fs-xl);
  --yazi-dev: var(--fs-2xl); /* Özet'teki tek büyük rakam */
  --satir-baslik: var(--lh-heading);
  --satir-araligi: var(--lh-body);
  --kalin: var(--fw-semibold);
  --orta-kalin: var(--fw-medium);
  --sik: var(--ls-tight);
  --cok-sik: var(--ls-tighter);

  /* Köşeler */
  --kose: var(--radius-md);
  --kose-kucuk: var(--radius-sm);
  --kose-tam: var(--radius-full);
  --kose-cubuk: 2px; /* grafik çubuğunun yalnızca üst köşeleri */

  /* Boşluklar */
  --bosluk-1: var(--space-1);
  --bosluk-2: var(--space-2);
  --bosluk-3: var(--space-3);
  --bosluk-4: var(--space-4);
  --bosluk-5: var(--space-5);
  --bosluk-6: var(--space-6);
  --bosluk-7: var(--space-7);

  /* Çizgi, gölge, saydamlık */
  --cizgi-kalinlik: var(--border-w);
  --odak-kalinlik: 2px;
  --golge: var(--shadow);
  --pasif-saydamlik: 0.5;

  /* Simgeler (çizimleri js/simgeler.js'te; Lucide) */
  --simge-boyut: var(--icon-sm);
  --simge-orta: var(--icon-md);
  --simge-buyuk: 28px;
  --simge-cizgi: var(--icon-stroke);

  /* Ölçüler */
  --kontrol-yukseklik: var(--control-h);
  --satir-yukseklik: var(--row-h);
  --kenar: var(--gutter);
  --sayfa-genislik: var(--dashboard-max);
  --pencere-genislik: 480px;
  --sayi-kutusu-en-az: 140px;
  --aciklama-en-az: 220px;
  --sekme-cubugu: 64px; /* alttaki sekme çubuğunun yüksekliği */
  --grafik-yukseklik: 160px; /* aylık çubuk grafik */
  --eksen-genislik: 32px; /* çubuk grafiğin soldaki rakamları */
  --yazi-eksen: 11px; /* grafiğin ay adları ve rakamları: telefonda 12 ay sığsın diye bir boy küçük */
  --halka-boyut: 112px; /* Özet'teki halka (yanında liste) */
  --halka-kucuk: 64px; /* Özet boşken kesik çizgili halka (Ç5) */
  --halka-kalinlik: 16; /* SVG'nin 160 birimlik ölçeğinde */
  --lejant-kare: 12px;
  --oran-genislik: 56px; /* dökümdeki oran kolonu (veri çubuklu) */
  --gecis: 500ms; /* çubukların dolması, halkanın çizilmesi */
  --hap-yukseklik: 60px; /* yüzen sekme çubuğu (A, B) */
  --bulaniklik: 14px; /* sekme çubuğunun arkasındaki bulanıklık */
  --cubuk-opaklik: 80%; /* sekme çubuğunun zemininin örtücülüğü; içerik altından seçilir */
  --kayma: 180ms; /* sekme sırasında yer değiştiren satırın kayması */
  --renk-gecis: 400ms; /* Hedef: yeşil yanan rakamın metin rengine dönüşü */
  --metin-genislik: 65ch; /* uzun açıklama satırı */
}

/* Tür renkleri (E · Excel Bütçe, tokens.override.css). Bir kartın ya da satırın türü sınıfla seçilir
   (.gelir / .gider / .birikim); içindeki her şey bu genel anahtarları kullanır. */
.gelir {
  --tur-1: var(--income-1); --tur-2: var(--income-2); --tur-3: var(--income-3); --tur-4: var(--income-4); --tur-5: var(--income-5);
  --tur-baslik: var(--income-head); --tur-yazi: var(--income-text); --tur-tam: var(--income-full);
  --tur-cubuk: var(--income-bar); --tur-kalan: var(--income-bar-rest); --tur-asan: var(--income-bar-over);
}
.gider {
  --tur-1: var(--expense-1); --tur-2: var(--expense-2); --tur-3: var(--expense-3); --tur-4: var(--expense-4); --tur-5: var(--expense-5);
  --tur-baslik: var(--expense-head); --tur-yazi: var(--expense-text); --tur-tam: var(--expense-full);
  --tur-cubuk: var(--expense-bar); --tur-kalan: var(--expense-bar-rest); --tur-asan: var(--expense-bar-over);
}
.birikim {
  --tur-1: var(--saving-1); --tur-2: var(--saving-2); --tur-3: var(--saving-3); --tur-4: var(--saving-4); --tur-5: var(--saving-5);
  --tur-baslik: var(--saving-head); --tur-yazi: var(--saving-text); --tur-tam: var(--saving-full);
  --tur-cubuk: var(--saving-bar); --tur-kalan: var(--saving-bar-rest); --tur-asan: var(--saving-bar-over);
}