/* Renk ve ölçü değişkenleri.
   Tema değiştirmek için sadece <html data-theme="dark"> değeri değişiyor,
   tüm bileşenler bu değişkenleri kullanıyor. */

:root {
  color-scheme: light;

  --bg: #f3f5fb;
  --bg-ust: #e9eefb;
  --bg-saydam: rgba(243, 245, 251, 0.86);

  --kart: #ffffff;
  --kart-2: #f6f8fd;

  --metin: #0e1729;
  --metin-soluk: #5f6f8a;

  --cizgi: #e3e8f2;
  --cizgi-koyu: #ccd6e6;

  --vurgu: #4f46e5;
  --vurgu-metin: #4338ca;
  --vurgu-yumusak: #ecebff;

  /* Kategori renkleri: O mor, T yeşil, D turuncu, P mavi, R gri.
     F kırmızı: yalnızca önemli tarihlerdeki "final" için ayrılmış renk. */
  --kat-o: #7c3aed;
  --kat-o-yumusak: #f1eaff;
  --kat-t: #15803d;
  --kat-t-yumusak: #e6f6ec;
  --kat-d: #ea580c;
  --kat-d-yumusak: #fdeee3;
  --kat-p: #2563eb;
  --kat-p-yumusak: #e8f0ff;
  --kat-r: #64748b;
  --kat-r-yumusak: #edf1f7;
  --kat-f: #dc2626;
  --kat-f-yumusak: #fdeaea;

  --ring-iz: #e6ebf5;

  --golge-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --golge-2: 0 14px 30px -18px rgba(15, 23, 42, 0.35);

  --r-buyuk: 18px;
  --r-orta: 14px;
  --r-kucuk: 10px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070b15;
  --bg-ust: #0b1324;
  --bg-saydam: rgba(7, 11, 21, 0.86);

  --kart: #101a2d;
  --kart-2: #0c1526;

  --metin: #e8eefb;
  --metin-soluk: #93a3bf;

  --cizgi: #1d2942;
  --cizgi-koyu: #2b3a57;

  --vurgu: #8b93ff;
  --vurgu-metin: #b3b8ff;
  --vurgu-yumusak: #1a2142;

  --kat-o: #b18cff;
  --kat-o-yumusak: #221a3c;
  --kat-t: #4ade80;
  --kat-t-yumusak: #10261b;
  --kat-d: #fb923c;
  --kat-d-yumusak: #2b1c11;
  --kat-p: #6ba6ff;
  --kat-p-yumusak: #14233d;
  --kat-r: #9fb0c9;
  --kat-r-yumusak: #18212f;
  --kat-f: #f87171;
  --kat-f-yumusak: #2b1414;

  --ring-iz: #1b2741;

  --golge-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --golge-2: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}