/* =====================================================================
   TASARIM BELİRTEÇLERİ
   =====================================================================
   Renk, boşluk, yazı ölçeği ve yarıçap tek yerde. Bileşenler ham
   değer kullanmıyor — böylece tema değişimi ve ölçek ayarı tek
   dosyadan yapılıyor.

   İKİ TEMA, ÜÇ DURUM
   Ziyaretçi ya açık ya koyu seçiyor (kök öğede data-theme), ya da
   hiç seçmiyor. Seçmediğinde işletim sisteminin tercihi geçerli.
   Bu yüzden koyu palet İKİ yerde tanımlı: prefers-color-scheme
   altında ve data-theme="dark" altında. Yalnızca birini yazmak,
   seçicinin bir yönde çalışmaması demek.
   ===================================================================== */

:root {
  /* ---- AÇIK TEMA (varsayılan tanım) ------------------------------ */
  --zemin:        #f7f7f9;
  --yuzey:        #ffffff;
  --yuzey-2:      #f1f2f5;

  --cizgi:        #e2e4ea;
  --cizgi-soft:   #eeeff3;
  --cizgi-guclu:  #cfd3dc;
  --cubuk-zemin:  #e7e9ef;

  --ink:          #14161c;
  --ink-2:        #4a4f5c;
  --ink-3:        #868d9c;

  --vurgu:        #4f46b8;
  --vurgu-yazi:   #ffffff;
  --vurgu-soft:   #efeefb;
  --vurgu-cizgi:  #cdc9f0;

  --ok:           #157a45;
  --ok-soft:      #e8f5ed;
  --ok-cizgi:     #b6ddc6;

  --uyari:        #9a6a0c;
  --uyari-soft:   #fbf1de;

  --hata:         #b03328;
  --hata-soft:    #fbeceb;

  --golge:        0 1px 2px rgba(20, 22, 28, .05), 0 4px 12px rgba(20, 22, 28, .04);

  /* ---- BOŞLUK ---------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* ---- YAZI ------------------------------------------------------ */
  /* Plus Jakarta Sans gövde, IBM Plex Mono sayı. Sayılar tek aralıklı
     ve tabular: sütun hâlinde alt alta gelen fiyatlar hizalı dursun. */
  --font:      'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-2xs: 11.5px;
  --fs-xs:  12.5px;
  --fs-sm:  13.5px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  21px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;

  /* ---- YARIÇAP --------------------------------------------------- */
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-tam: 999px;

  /* ---- ÖLÇÜ ------------------------------------------------------ */
  --kabuk: 1360px;
  --gutter: var(--s-7);

  /* DOKUNMA HEDEFİ
     Mobilde hiçbir tıklanabilir öğe bunun altına inmiyor. Masaüstünde
     de zararı yok; ayrı bir değer tutmak iki yerde bakım demekti. */
  --dokunma: 44px;
}

/* ---- KOYU TEMA — sistem tercihi --------------------------------- */
/* :not([data-theme="light"]) : ziyaretçi açık temayı AÇIKÇA seçtiyse
   sistem tercihi onu ezmemeli. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin:        #0d1013;
    --yuzey:        #141920;
    --yuzey-2:      #1a212a;

    --cizgi:        #232c37;
    --cizgi-soft:   #1c242d;
    --cizgi-guclu:  #2f3a47;
    --cubuk-zemin:  #222a34;

    --ink:          #e9edf2;
    --ink-2:        #aab5c2;
    --ink-3:        #798593;

    --vurgu:        #8b83f5;
    --vurgu-yazi:   #0d1013;
    --vurgu-soft:   #1a1d33;
    --vurgu-cizgi:  #38356b;

    --ok:           #4ade80;
    --ok-soft:      #10251a;
    --ok-cizgi:     #215638;

    --uyari:        #f0b45a;
    --uyari-soft:   #2a2113;

    --hata:         #f47272;
    --hata-soft:    #2c1618;

    --golge:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  }
}

/* ---- KOYU TEMA — açık seçim ------------------------------------- */
:root[data-theme="dark"] {
  --zemin:        #0d1013;
  --yuzey:        #141920;
  --yuzey-2:      #1a212a;

  --cizgi:        #232c37;
  --cizgi-soft:   #1c242d;
  --cizgi-guclu:  #2f3a47;
  --cubuk-zemin:  #222a34;

  --ink:          #e9edf2;
  --ink-2:        #aab5c2;
  --ink-3:        #798593;

  --vurgu:        #8b83f5;
  --vurgu-yazi:   #0d1013;
  --vurgu-soft:   #1a1d33;
  --vurgu-cizgi:  #38356b;

  --ok:           #4ade80;
  --ok-soft:      #10251a;
  --ok-cizgi:     #215638;

  --uyari:        #f0b45a;
  --uyari-soft:   #2a2113;

  --hata:         #f47272;
  --hata-soft:    #2c1618;

  --golge:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}

@media (max-width: 860px) {
  :root { --gutter: var(--s-4); }
}