/*
 * Tasarım jetonları (PROJE.md 11). Görsel yön: "Kayıt Akışı Tasarımı" taslağı (2026-09-28, onaylandı).
 * Bileşenler YALNIZCA bu değişkenleri kullanır; sabit renk/ölçü yazılmaz.
 */
:root {
  color-scheme: light;

  /* Renkler — açık tema */
  --renk-zemin: #FFF7EC;          /* krem */
  --renk-sahne: #F4E6D0;          /* geniş ekranda kartın arkasındaki zemin */
  --renk-yuzey: #FFFFFF;
  --renk-yuzey-2: #FFF1DE;
  --renk-cizgi: #ECE4D6;
  --renk-cizgi-koyu: #D9D1C2;
  --renk-metin: #1F1A3D;
  --renk-metin-soluk: #5B5675;
  --renk-vurgu: #5B3DF5;          /* üzüm moru — ana renk */
  --renk-vurgu-koyu: #3F28B8;     /* buton gölgesi, hover */
  --renk-vurgu-acik: #EFEAFF;     /* seçili kutu zemini */
  --renk-vurgu-uzeri: #FFFFFF;
  --renk-secili-metin: #3F28B8;  /* seçili kutudaki yazı */
  --renk-gunes: #FFC53D;          /* sarı vurgu, maskot */
  --renk-gunes-koyu: #D99A12;
  --renk-gunes-uzeri: #1F1A3D;
  --renk-nane: #2EC4A6;           /* ilerleme, başarı */
  --renk-nane-koyu: #1B7F6B;
  --renk-mercan: #FF8A7A;
  --renk-dikkat-zemin: #FFF1D6;
  --renk-dikkat-metin: #6B4300;
  --renk-hata: #B42318;
  --renk-hata-zemin: #FDECEA;
  --renk-basari: #1B7F6B;
  --renk-basari-zemin: #E3F7F2;
  --renk-bilgi-zemin: #EFEAFF;
  --renk-odak: #5B3DF5;

  /* Boşluk ölçeği (4 px tabanlı) */
  --bosluk-1: 4px;
  --bosluk-2: 8px;
  --bosluk-3: 12px;
  --bosluk-4: 16px;
  --bosluk-5: 24px;
  --bosluk-6: 32px;
  --bosluk-7: 48px;
  --bosluk-8: 64px;

  /* Yazı (fonts.css ile kendi sunucumuzdan) */
  --yazi-aile: 'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif;
  --yazi-baslik-aile: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --yazi-kucuk: 0.875rem;   /* 14 */
  --yazi-orta: 0.9375rem;   /* 15 */
  --yazi-govde: 1.0625rem;  /* 17 */
  --yazi-buyuk: 1.1875rem;  /* 19 */
  --yazi-baslik-3: 1.375rem;
  --yazi-baslik-2: 1.875rem; /* 30 */
  --yazi-baslik-1: 2.25rem;  /* 36 */
  --satir-arasi: 1.5;

  /* Şekil */
  --kose-kucuk: 12px;
  --kose: 16px;
  --kose-buyuk: 22px;
  --kose-tam: 999px;
  --kabarti: 5px;            /* butonların alt "basılabilir" gölgesi */
  --golge-1: 0 1px 2px rgb(31 26 61 / 0.06);

  /* Dokunma ve yerleşim */
  --dokunma-min: 44px;
  --buton-yukseklik: 60px;
  --icerik-genislik: 480px;
  --gecis: 140ms cubic-bezier(0.2, 0, 0, 1);
}

/* Koyu tema (K43). Seçim cihaz bazında `tema` çerezinde; <html data-tema="acik|koyu|sistem">.
   Varsayılan açık. "sistem" cihazın açık/koyu ayarını izler. İki blok aynı renkleri taşır; biri değişirse diğeri de. */
:root[data-tema="koyu"] {
  color-scheme: dark;
  --renk-zemin: #17152B;
  --renk-sahne: #0F0D1F;
  --renk-yuzey: #221F3D;
  --renk-yuzey-2: #2A2649;
  --renk-cizgi: #34305A;
  --renk-cizgi-koyu: #45406F;
  --renk-metin: #F3F1FF;
  --renk-metin-soluk: #B7B2D6;
  --renk-vurgu: #7A63FF;
  --renk-vurgu-koyu: #4A33C9;
  --renk-vurgu-acik: #2E2860;
  --renk-secili-metin: #FFFFFF;
  --renk-dikkat-zemin: #3A2E12;
  --renk-dikkat-metin: #FFD98A;
  --renk-hata: #FF9C8F;
  --renk-hata-zemin: #3D1E1B;
  --renk-basari: #5FE0C3;
  --renk-basari-zemin: #173A34;
  --renk-bilgi-zemin: #2E2860;
  --renk-odak: #B3A5FF;
  --golge-1: 0 1px 2px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root[data-tema="sistem"] {
    color-scheme: dark;
    --renk-zemin: #17152B;
    --renk-sahne: #0F0D1F;
    --renk-yuzey: #221F3D;
    --renk-yuzey-2: #2A2649;
    --renk-cizgi: #34305A;
    --renk-cizgi-koyu: #45406F;
    --renk-metin: #F3F1FF;
    --renk-metin-soluk: #B7B2D6;
    --renk-vurgu: #7A63FF;
    --renk-vurgu-koyu: #4A33C9;
    --renk-vurgu-acik: #2E2860;
    --renk-secili-metin: #FFFFFF;
    --renk-dikkat-zemin: #3A2E12;
    --renk-dikkat-metin: #FFD98A;
    --renk-hata: #FF9C8F;
    --renk-hata-zemin: #3D1E1B;
    --renk-basari: #5FE0C3;
    --renk-basari-zemin: #173A34;
    --renk-bilgi-zemin: #2E2860;
    --renk-odak: #B3A5FF;
    --golge-1: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}