/* Sprint 13: Shared theme tokens — yüklenme sırası: bu CSS önce, template'in
   site.css'i sonra. Template'ler bu değişkenleri ister referans alır
   (var(--accent)) ister tamamen yok sayar. Yeni 'studio' teması ve yeni
   section partial'ları (metrics/media/timeline) bunları doğrudan kullanır.

   Mod: <html class="theme-dark|theme-light|theme-auto"> — Layout'taki theme
   bootstrap script'i set eder (önce SiteSettings.theme.mode default, sonra
   varsa localStorage 'erp.theme' override eder).
   .theme-auto OS tercihini takip eder (prefers-color-scheme).

   --accent: Layout zaten site.themeColor'dan inline <style> ile basıyor;
   burası bir fallback verir, böylece tokenları kullanan bileşenler
   themeColor set edilmemiş olsa bile boş bir renkle açılmaz.
*/

:root {
    /* Renk-tonu-bağımsız sabitler — her iki modda da aynı */
    --accent:          #4f7cff;
    --accent-2:        #4f7cff;
    --accent-fg:       #ffffff;

    /* Layout / spacing */
    --radius-sm:       6px;
    --radius:          12px;
    --radius-lg:       20px;
    --shadow-sm:       0 1px 3px rgba(0,0,0,.08);
    --shadow:          0 8px 24px rgba(0,0,0,.10);
    --shadow-lg:       0 20px 60px rgba(0,0,0,.18);

    /* Tipografi */
    --font-sans:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --font-display:    var(--font-sans);

    /* Akıcı (fluid) tipografi — büyük başlık ölçekleri */
    --type-display:    clamp(2.5rem, 6vw, 5.5rem);
    --type-h1:         clamp(2rem, 4.5vw, 3.5rem);
    --type-h2:         clamp(1.5rem, 3vw, 2.25rem);
    --type-lead:       clamp(1.05rem, 1.4vw, 1.25rem);

    /* Animasyon */
    --ease-out:        cubic-bezier(.16,1,.3,1);
    --duration:        .6s;
}

/* ---- Light mode (default & .theme-light) ---- */
:root,
.theme-light {
    --bg:              #ffffff;
    --bg-soft:         #f7f7f9;
    --surface:         #ffffff;
    --section-bg:      #ffffff;
    --section-bg-alt:  #f5f5f7;
    --fg:              #111418;
    --fg-muted:        #5b6470;
    --fg-subtle:       #8a93a0;
    --border:          rgba(0,0,0,.08);
    --border-strong:   rgba(0,0,0,.16);
    --overlay:         rgba(255,255,255,.7);
}

/* ---- Dark mode ---- */
.theme-dark {
    --bg:              #0c0d10;
    --bg-soft:         #15161a;
    --surface:         #16181d;
    --section-bg:      #0c0d10;
    --section-bg-alt:  #14161b;
    --fg:              #ececee;
    --fg-muted:        #a6acb6;
    --fg-subtle:       #6b7280;
    --border:          rgba(255,255,255,.10);
    --border-strong:   rgba(255,255,255,.20);
    --overlay:         rgba(0,0,0,.55);
    --shadow-sm:       0 1px 3px rgba(0,0,0,.4);
    --shadow:          0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:       0 20px 60px rgba(0,0,0,.55);
}

/* ---- Auto: OS tercihini takip et ---- */
@media (prefers-color-scheme: dark) {
    .theme-auto {
        --bg:              #0c0d10;
        --bg-soft:         #15161a;
        --surface:         #16181d;
        --section-bg:      #0c0d10;
        --section-bg-alt:  #14161b;
        --fg:              #ececee;
        --fg-muted:        #a6acb6;
        --fg-subtle:       #6b7280;
        --border:          rgba(255,255,255,.10);
        --border-strong:   rgba(255,255,255,.20);
        --overlay:         rgba(0,0,0,.55);
    }
}

/* Section partial'ları (metrics/media/timeline) için kök kapsayıcı yardımı.
   Mevcut Bootstrap section'larını bozmamak için class adı son derece özgül. */
.erp-section {
    background: var(--section-bg);
    color: var(--fg);
    padding: clamp(3rem, 7vw, 6rem) 0;
}
.erp-section--alt { background: var(--section-bg-alt); }
.erp-section h2 { color: var(--fg); }
.erp-section .muted { color: var(--fg-muted); }
