/* Tasarım değişkenleri. Tüm renk ve ölçü kararları tek kaynaktan yönetilir. */
:root {
    /* Yüzeyler */
    --bg:            #0A1114;
    --surface:       #0F1A1E;
    --surface-2:     #142228;
    --border:        #1E2E34;
    --border-soft:   #16242A;

    /* Vurgu */
    --accent:        #2ECC8B;
    --accent-strong: #1FA971;
    --accent-soft:   rgba(46, 204, 139, 0.12);

    /* Metin */
    --text:          #E8F1EE;
    --text-muted:    #94A8A5;
    --text-dim:      #62777A;

    /* Durum */
    --warn:          #E0A458;
    --danger:        #E05A5A;
    --info:          #5AA9E0;

    /* Kod bloğu — zemin (--code-bg) her iki temada da bilerek koyu kaldığı için bu renkler
       temaya göre değişmez; düz metin de bu yüzden --text değil sabit --code-text kullanır. */
    --code-bg:       #0C1519;
    --code-text:     #E8F1EE;
    --code-key:      #6FB3E0;
    --code-str:      #2ECC8B;
    --code-num:      #E0A458;
    --code-comment:  #566E71;

    /* Ölçüler */
    --radius:        14px;
    --radius-sm:     8px;
    --radius-pill:   999px;
    --shadow:        0 8px 32px rgba(0, 0, 0, .45);
    --container:     1200px;

    /* Tipografi */
    --font-heading: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, "Cascadia Code", Consolas, monospace;

    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;
    --fs-38: 38px;
    --fs-52: 52px;

    /* Boşluk skalası */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    --header-h: 72px;
    --transition: .18s ease;
}

/* Aydınlık tema: referans tasarımdaki güneş ikonuyla değiştirilir, tercih localStorage'a yazılır. */
:root[data-theme="light"] {
    --bg:            #F4F8F7;
    --surface:       #FFFFFF;
    --surface-2:     #EEF4F2;
    --border:        #DCE6E2;
    --border-soft:   #E7EFEC;

    --accent:        #1FA971;
    --accent-strong: #178A5C;
    --accent-soft:   rgba(31, 169, 113, 0.12);

    --text:          #10201C;
    --text-muted:    #4B615C;
    --text-dim:      #7C8F8A;

    /* Orijinal --warn/--danger/--info koyu zeminde tasarlandı; açık zeminde metin olarak
       kullanıldıklarında AA kontrastını (4.5:1) tutturamıyorlardı, bu yüzden koyulaştırıldı. */
    --warn:          #8A6435;
    --danger:        #B34848;
    --info:          #3F769D;

    --code-bg:       #0E1A17;
    --code-comment:  #7C8F8A;

    --shadow: 0 8px 32px rgba(16, 32, 28, .10);
}

/* Boşluk skalasındaki en büyük iki adım (--sp-8/--sp-9) masaüstü için ölçülenmişti; bunlar
   .section, .hero, related-posts/projects, comments-section gibi sitenin her yerinde bölüm
   arası boşluk olarak kullanılıyor. Telefonda küçültülmeden bırakılınca sayfa/bölüm arası
   boşluklar orantısız büyük görünüyordu. */
@media (max-width: 640px) {
    :root {
        --sp-8: 40px;
        --sp-9: 56px;
    }
}