/* ============================================================================
   Frues tasarım token'ları — TEK renk kaynağı.

   Katman sırası (sonra gelen kazanır):
     1) bu dosya            → :root varsayılanları + açık/koyu türevleri
     2) frues{N}-*.css      → .frues-site[data-theme="..."] varyant override'ı
     3) sunucu inline <style> → aktif ThemeProfile paleti (ThemeHelper üretir)

   İki katmanlı sözlük:
     --brand-*   ham palet (ThemeProfile'dan gelir)
     diğerleri   semantic token — bileşenler YALNIZCA bunları kullanır

   Koyu tema `<html data-color-scheme="dark">` ile açılır; değerler ham
   paletten color-mix ile türetilir, böylece 35 tema için elle renk yazılmaz.
   `data-theme` ise marka varyantını seçer — iki eksen birbirinden bağımsızdır.
   ========================================================================== */

:root {
    /* Fiyat rengi. Düz var(--primary) beyaz zeminde 4.10 kontrast veriyordu —
       WCAG AA'nın 4.5 eşiğinin altı. %88 karışım 5.11'e çıkarır, rengin kimliği
       değişmez. Koyu zeminde düz primary 4.00 veriyor; orada tersine açılıyor (5.46). */
    --price: color-mix(in srgb, var(--primary) 88%, #000);

    /* ── Tipografi ve boşluk ölçeği ───────────────────────────────────────
       Önce yalnız ürün listeleme sayfasında denenip onaylandı, şimdi vitrinin
       tamamına açıldı. Ürün adı ve fiyatı, çevresindeki ikincil metinlerden
       (ekmek kırıntısı, filtre listesi) daha küçük kalmasın diye. */
    --fs-hero: clamp(1.9rem, 3.2vw, 2.4rem);
    --fs-lead: .95rem;
    --fs-body: .9rem;
    --fs-meta: .8rem;
    --fs-eyebrow: .74rem;

    --sp-1: 6px;
    --sp-2: 12px;
    --sp-3: 20px;
    --sp-4: 32px;
    --sp-5: 48px;

    color-scheme: light;

    /* ---- ham palet (sunucu ThemeProfile'dan ezer) ---- */
    --brand-primary: #6b8e5a;
    --brand-secondary: #fafaf7;
    --brand-accent: #6b8e5a;
    --brand-bg: #ffffff;

    /* ---- tipografi ---- */
    --font: 'Jost', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- marka ---- */
    --primary: var(--brand-primary);
    --secondary: var(--brand-secondary);
    --accent: var(--brand-accent);
    --brand-tinted: var(--brand-primary);

    /* ---- zeminler ---- */
    --body-bg: var(--brand-bg);
    --surface: #ffffff;
    --surface-2: var(--brand-secondary);
    --surface-raised: #ffffff;
    --card-img-bg: var(--brand-secondary);
    --header-bg: rgba(255, 255, 255, 0.92);
    --footer-bg: var(--brand-secondary);

    /* ---- metin ---- */
    --text-primary: #1a1a1a;
    --text-secondary: #555555;
    --text-muted: #8a8a8a;
    --heading-color: #0f172a;
    --eyebrow-color: var(--primary);

    /* ---- çizgiler ---- */
    --border-color: #efefe9;
    --border-strong: #d9d9d2;
    --divider: #f1f1ec;

    /* ---- eylem (CTA) ---- */
    --cta-bg: #1a1a1a;
    --cta-color: #ffffff;
    --cta-radius: 0;
    /* Frues demo kimliği: siyah buton. Koyu modda ters çevrilir ki görünür kalsın. */
    --btn-dark-bg: #1a1a1a;
    --btn-dark-color: #ffffff;
    --focus-ring: color-mix(in srgb, var(--primary) 45%, transparent);

    /* ---- gölgeler ---- */
    --shadow-1: 0 4px 14px rgba(15, 23, 42, .07);
    --shadow-2: 0 14px 34px rgba(15, 23, 42, .12);

    /* ---- durum renkleri ---- */
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;
    --on-success: #ffffff;
    --on-danger: #ffffff;

    /* ---- geriye uyum: eski --theme-* kullanımları (gn-*, admin, ai-vision) ---- */
    --theme-primary: var(--primary);
    --theme-secondary: var(--secondary);
    --theme-accent: var(--accent);
    --theme-text: var(--text-primary);
    --theme-bg: var(--body-bg);

    /* ---- kırılma noktaları (referans; CSS'te medya sorgusu değişkeni yok) ----
       1200px geniş masaüstü · 992px tablet yatay · 768px tablet dikey · 480px telefon */
}

/* ============================================================================
   KOYU TEMA
   Nötr gri değil, markadan tonlanmış koyu: her tema kendi koyusunu alır.
   ========================================================================== */
:root[data-color-scheme="dark"] {
    --price: color-mix(in srgb, var(--primary) 80%, #fff);

    color-scheme: dark;

    --body-bg: color-mix(in srgb, var(--brand-primary) 6%, #0e1013);
    --surface: color-mix(in srgb, var(--brand-primary) 8%, #16181d);
    --surface-2: color-mix(in srgb, var(--brand-primary) 5%, #1c1f25);
    --surface-raised: color-mix(in srgb, var(--brand-primary) 10%, #1e2128);
    --card-img-bg: color-mix(in srgb, var(--brand-primary) 7%, #1c1f25);

    --text-primary: #eceff3;
    --text-secondary: color-mix(in srgb, #eceff3 66%, transparent);
    --text-muted: color-mix(in srgb, #eceff3 45%, transparent);
    --heading-color: #f7f9fb;

    --border-color: color-mix(in srgb, #eceff3 14%, transparent);
    --border-strong: color-mix(in srgb, #eceff3 26%, transparent);
    --divider: color-mix(in srgb, #eceff3 10%, transparent);

    /* Koyu zeminde soluk kalan koyu markaları açığa çek */
    --primary: var(--brand-tinted);
    --eyebrow-color: var(--brand-tinted);
    --accent: var(--brand-tinted);

    /* --secondary koyu modda TANIMSIZ kalıyordu: ham paletteki açık tonu (#fafaf7 gibi)
       taşıdığı için onu zemin olarak kullanan 19 kural koyu sayfada açık leke bırakıyordu
       (arama çubuğu, sepet görselleri, özellik bandı, kategori hero'su, hızlı bakış...).
       Tek tek seçici yamamak yerine jetonun kendisi --surface-2 ile aynı koyuya çekildi. */
    --secondary: color-mix(in srgb, var(--brand-primary) 5%, #1c1f25);

    --header-bg: color-mix(in srgb, var(--surface) 88%, transparent);
    --footer-bg: var(--surface-2);

    --cta-bg: var(--brand-tinted);
    --cta-color: var(--cta-color-dark, #101216);
    --btn-dark-bg: #f2f4f7;
    --btn-dark-color: #14161a;

    --shadow-1: 0 6px 18px rgba(0, 0, 0, .38);
    --shadow-2: 0 16px 40px rgba(0, 0, 0, .48);

    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    --on-success: #06210f;
    --on-danger: #2a0b0b;
}

/* JS kapalıysa işletim sistemi tercihine düş.
   JS açıkken <head>'deki senkron script zaten data-color-scheme'i bastığı için
   bu blok devreye girmez; yalnızca script çalışmadığında geçerli olur. */
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) {
        --price: color-mix(in srgb, var(--primary) 80%, #fff);

        color-scheme: dark;

        --body-bg: color-mix(in srgb, var(--brand-primary) 6%, #0e1013);
        --surface: color-mix(in srgb, var(--brand-primary) 8%, #16181d);
        --surface-2: color-mix(in srgb, var(--brand-primary) 5%, #1c1f25);
        --surface-raised: color-mix(in srgb, var(--brand-primary) 10%, #1e2128);
        --card-img-bg: color-mix(in srgb, var(--brand-primary) 7%, #1c1f25);

        --text-primary: #eceff3;
        --text-secondary: color-mix(in srgb, #eceff3 66%, transparent);
        --text-muted: color-mix(in srgb, #eceff3 45%, transparent);
        --heading-color: #f7f9fb;

        --border-color: color-mix(in srgb, #eceff3 14%, transparent);
        --border-strong: color-mix(in srgb, #eceff3 26%, transparent);
        --divider: color-mix(in srgb, #eceff3 10%, transparent);

        --primary: var(--brand-tinted);
        --eyebrow-color: var(--brand-tinted);
        --accent: var(--brand-tinted);
        --secondary: color-mix(in srgb, var(--brand-primary) 5%, #1c1f25);

        --header-bg: color-mix(in srgb, var(--surface) 88%, transparent);
        --footer-bg: var(--surface-2);

        --cta-bg: var(--brand-tinted);
        --cta-color: var(--cta-color-dark, #101216);
        --btn-dark-bg: #f2f4f7;
        --btn-dark-color: #14161a;

        --shadow-1: 0 6px 18px rgba(0, 0, 0, .38);
        --shadow-2: 0 16px 40px rgba(0, 0, 0, .48);

        --success: #4ade80;
        --warning: #fbbf24;
        --danger: #f87171;
        --info: #60a5fa;
        --on-success: #06210f;
        --on-danger: #2a0b0b;
    }
}


/* Koyu modda logo ve marka görselleri */
:root[data-color-scheme="dark"] .frues-logo img,
:root:not([data-color-scheme]) .frues-logo img {
    /* varsayılan: dokunma — koyu modda aşağıdaki kural devreye girer */
}
/* Logoyu invert etmiyoruz: brightness(0) invert(1) çok renkli logoları düz beyaz
   silüete çevirip okunmaz hale getiriyor. Bunun yerine koyu modda logonun
   arkasına yumuşak açık bir zemin veriyoruz — her logo tipinde çalışır. */
:root[data-color-scheme="dark"] .frues-logo img {
    background: rgba(255, 255, 255, .92);
    border-radius: 8px;
    padding: 4px 8px;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) .frues-logo img {
        background: rgba(255, 255, 255, .92);
        border-radius: 8px;
        padding: 4px 8px;
    }
}

/* ---- Açık/koyu mod düğmesi: ikon ve etiketi moda göre değiştir (JS'siz) ---- */
.frues-scheme-ic-dark, .frues-scheme-label-dark { display: none; }
:root[data-color-scheme="dark"] .frues-scheme-ic-light,
:root[data-color-scheme="dark"] .frues-scheme-label-light { display: none; }
:root[data-color-scheme="dark"] .frues-scheme-ic-dark { display: inline-flex; }
:root[data-color-scheme="dark"] .frues-scheme-label-dark { display: inline; }
.frues-scheme-toggle { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================================
   Koyu mod — sabit "demo kimlik" renkleri taşıyan bileşenler.
   Bu renkler açık modda bilinçli olarak korunur (Shopify demo paritesi);
   koyu modda tema yüzeylerine devredilir ki metin okunur kalsın.
   ========================================================================== */
:root[data-color-scheme="dark"] .frues-promo-shopify .frues-promo-card {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
}

/* Görsel taşıyan kart/hero alanları koyu modda çok parlak kalmasın */
:root[data-color-scheme="dark"] .frues3-hero { background: var(--surface-2); }

/* Kategori ve ÜRÜN kartı görselleri contain ile gösteriliyor ve kaynak fotoğrafların
   kendi zemini beyaz. Koyu modda kart zeminini koyu yaparsak fotoğraf beyaz bir
   blok gibi durur — logoda olduğu gibi burada da yumuşak açık bir zemin veriyoruz.
   Ürün kartı çerçevesi ve hızlı bakış görseli aynı sebeple listeye eklendi: koyu
   modda ürünün arkası koyu, fotoğrafın içi beyaz kalıyor ve kare bir leke oluyordu. */
:root[data-color-scheme="dark"] .frues-cat-card-media,
:root[data-color-scheme="dark"] .frues-card-img-frame,
:root[data-color-scheme="dark"] .frues-quickview-img {
    background: #f2f4f7;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme]) .frues-cat-card-media,
    :root:not([data-color-scheme]) .frues-card-img-frame,
    :root:not([data-color-scheme]) .frues-quickview-img { background: #f2f4f7; }
}

/* Arama çubuğu ve dil listesi gibi paneller: zemin yaması kalktı — bu dört bileşen
   var(--secondary) kullanıyor ve o jeton artık koyu modda da tanımlı. */