/* ============================================================
   color.css — digitech_blackberry temasının tek renk kaynağı

   Yükleme sırası: main.css -> color.css -> style.css
   main.css'ten SONRA gelir ki referans temanın kırmızı --theme/--theme2
   değişkenlerini ezebilsin; style.css'ten ÖNCE gelir ki style.css
   buradaki token'ları kullanabilsin.

   Kural: style.css'e sert kodlanmış renk (hex/rgb) yazılmaz, hepsi
   buradan var(--dg-*) ile çağrılır. Yeni bir renk gerekirse önce
   burada token olarak tanımlanır.

   Katmanlar:
     1. Ham palet      — çıplak renk değerleri, tek doğruluk kaynağı
     2. Anlamsal       — "bu renk ne işe yarar" (brand, text, surface, state)
     3. Bileşen        — buton/input/navbar gibi parçaların kendi token'ları
     4. Alfa + gölge   — saydam katmanlar ve gölge tanımları
     5. Gradient       — çok duraklı renk geçişleri

   Performans: tüm token'lar tek :root bloğunda, iç içe var() zinciri
   en fazla iki kademe (bileşen -> anlamsal -> ham). Tarayıcı custom
   property'leri bir kez çözer, derinlik arttıkça çözümleme maliyeti
   artar; iki kademe okunabilirlik ile hız arasında dengeli nokta.
   ============================================================ */

:root {
    /* ========================================================
       1. HAM PALET — çıplak değerler, tek doğruluk kaynağı
       Doğrudan kullanılmaz; aşağıdaki anlamsal token'lar bunlara bakar.
       Bir markanın tonu değişecekse yalnızca burası düzenlenir.
       ======================================================== */

    /* Mor ölçeği — markanın ana rengi, 50 en açık 900 en koyu */
    --dg-purple-50: #f5eef9;
    --dg-purple-100: #eee8f1;
    --dg-purple-200: #e9d5ff;
    --dg-purple-300: #c655f6;
    --dg-purple-400: #8a46a2;
    --dg-purple-500: #734ea4;
    --dg-purple-600: #711391;
    --dg-purple-700: #602483;
    --dg-purple-800: #4f1d6e;
    --dg-purple-900: #29145f;

    /* Koyu mor ölçeği — navbar, footer, koyu bölüm zeminleri */
    --dg-plum-400: #3c2f68; /* footer zemininden az ayrışan silik ton (künye, powered by) */
    --dg-plum-500: #57219c;
    --dg-plum-600: #3d1470;
    --dg-plum-700: #2e0541;
    --dg-plum-800: #271038;
    --dg-plum-900: #200b3b;
    --dg-plum-950: #1d0c2a;

    /* Nötr ölçeği — metin, kenarlık, zemin */
    --dg-neutral-0: #ffffff;
    --dg-neutral-50: #f7f7f7;
    --dg-neutral-100: #f5f5f8;
    --dg-neutral-200: #f1eef5;
    --dg-neutral-300: #e9e5ee;
    --dg-neutral-400: #d9d1e2;
    --dg-neutral-500: #c9c5d1;
    --dg-neutral-600: #b7afc2;
    --dg-neutral-700: #9b95a6;
    --dg-neutral-800: #675f6b;
    --dg-neutral-900: #0f1126;
    --dg-neutral-1000: #000000;

    /* Durum renkleri — her biri dört kademe: ana / zemin / kenarlık / metin */
    --dg-red-500: #dc1838;
    --dg-red-600: #d92d20;
    --dg-red-700: #b42318;
    --dg-red-100: #fecaca;
    --dg-red-50: #fef3f2;

    --dg-amber-500: #f59e0b;
    --dg-amber-700: #b45309;
    --dg-amber-100: #fde68a;
    --dg-amber-50: #fffbeb;

    --dg-green-500: #16a34a;
    --dg-green-700: #166534;
    --dg-green-100: #bbf7d0;
    --dg-green-50: #f0fdf4;

    --dg-blue-500: #2563eb;
    --dg-blue-700: #1d4ed8;
    --dg-blue-100: #bfdbfe;
    --dg-blue-50: #eff6ff;

    --dg-indigo-500: #463da0;

    /* ========================================================
       2. ANLAMSAL TOKEN'LAR — "bu renk ne işe yarar"
       Bileşenler ve style.css öncelikle bu katmanı kullanır.
       ======================================================== */

    /* --- Marka --- */
    --dg-brand-primary: var(--dg-purple-700); /* Ana marka moru */
    --dg-brand-primary-hover: var(--dg-purple-600); /* CTA / hover tonu */
    --dg-brand-primary-pressed: var(--dg-purple-800); /* Basılı durum */
    --dg-brand-accent: var(--dg-purple-300); /* Parlak vurgu, odak halkası */
    --dg-brand-light-purple: var(--dg-purple-400);
    --dg-brand-transition: var(--dg-purple-500); /* Geçiş ara tonu */
    --dg-brand-dark-title: var(--dg-purple-900); /* Koyu başlık / güçlü metin */
    --dg-brand-indigo: var(--dg-indigo-500); /* Gradient ikincil rengi */
    --dg-brand-red: var(--dg-red-500); /* Logo kırmızısı */

    /* referans temanın (main.css) kendi değişkenleri — kırmızıdan mora çevrilir.
       main.css'te --theme kullanan onlarca kural (buton, hover, active) bu iki
       satır sayesinde tek noktadan mora döner, kuralları tek tek değiştirmeye gerek yok */
    --theme: var(--dg-brand-primary);
    --theme2: var(--dg-brand-primary-hover);

    /* main.css'in gövde metni rengi (#5E5F63 nötr gri) — tema paletinin mor tonlu
       grisine çekilir, böylece sayfadaki tüm metin aynı renk ailesinden gelir */
    --text: var(--dg-text-secondary);

    /* --- Yüzeyler --- */
    --dg-surface-bg: var(--dg-neutral-50); /* Genel sayfa zemini */
    --dg-section-bg: var(--dg-neutral-100); /* Açık zeminli bölümler */
    --dg-surface-card: var(--dg-neutral-0); /* Kart / panel zemini */
    --dg-surface-soft-purple: var(--dg-purple-50); /* Yumuşak mor zemin */
    --dg-surface-raised: var(--dg-neutral-0); /* Yükseltilmiş yüzey (dropdown, popover) */
    --dg-surface-sunken: var(--dg-neutral-200); /* Çökük yüzey (input zemini, well) */
    --dg-surface-dark: var(--dg-neutral-900); /* Koyu bölüm zemini (slider, istatistik) */
    --dg-surface-footer: var(--dg-plum-800);
    --dg-surface-footer-dark: var(--dg-plum-950);
    /* Footer künyesi — normalde silik durur, hover'da beyaza çıkar */
    --dg-footer-credit: var(--dg-plum-400);
    --dg-footer-credit-hover: var(--dg-neutral-0);
    --dg-surface-overlay: var(--dg-alpha-black-40); /* Modal arkası karartma */

    /* --- Kenarlıklar --- */
    --dg-border-subtle: var(--dg-purple-100); /* En hafif ayırıcı */
    --dg-border-default: var(--dg-neutral-400); /* Standart kenarlık */
    --dg-border-strong: var(--dg-neutral-600); /* Vurgulu kenarlık */
    --dg-border-inverse: var(--dg-alpha-white-12); /* Koyu zemin üstü kenarlık */

    /* eski isimler — style.css'te hâlâ kullanılıyor, kırılmasın diye korundu.
       Yeni kod yukarıdaki --dg-border-* isimlerini kullanmalı */
    --dg-surface-border-light: var(--dg-border-subtle);
    --dg-surface-border: var(--dg-border-default);
    --dg-surface-disabled-border: var(--dg-border-strong);

    /* --- Metin hiyerarşisi --- */
    --dg-text-primary: var(--dg-purple-900); /* Başlık / güçlü metin */
    --dg-text-secondary: var(--dg-neutral-800); /* Gövde metni */
    --dg-text-muted: var(--dg-neutral-700); /* Yardımcı / ikincil bilgi */
    --dg-text-disabled: var(--dg-neutral-500);
    --dg-text-inverse: var(--dg-neutral-0); /* Koyu zemin üstü metin */
    --dg-text-inverse-muted: var(--dg-alpha-white-70); /* Koyu zemin üstü ikincil metin */
    --dg-text-link: var(--dg-brand-primary);
    --dg-text-link-hover: var(--dg-brand-primary-hover);
    --dg-text-on-brand: var(--dg-neutral-0); /* Mor zemin üstü metin */

    /* eski isimler — korundu */
    --dg-surface-secondary-text: var(--dg-text-secondary);
    --dg-surface-muted-text: var(--dg-text-muted);
    --dg-surface-disabled-text: var(--dg-text-disabled);

    /* --- Durum: hata / danger --- */
    --dg-danger: var(--dg-red-600);
    --dg-danger-hover: var(--dg-red-700);
    --dg-danger-surface: var(--dg-red-50);
    --dg-danger-border: var(--dg-red-100);
    --dg-danger-text: var(--dg-red-700);
    --dg-danger-on: var(--dg-neutral-0); /* danger zemini üstündeki metin */

    /* "error" adıyla da çağrılabilsin — style.css'teki mevcut kullanım korunur */
    --dg-error: var(--dg-danger);
    --dg-error-surface: var(--dg-danger-surface);
    --dg-error-border: var(--dg-danger-border);
    --dg-error-text: var(--dg-danger-text);

    /* --- Durum: uyarı / warning --- */
    --dg-warning: var(--dg-amber-500);
    --dg-warning-hover: var(--dg-amber-700);
    --dg-warning-surface: var(--dg-amber-50);
    --dg-warning-border: var(--dg-amber-100);
    --dg-warning-text: var(--dg-amber-700);
    --dg-warning-on: var(--dg-purple-900); /* sarı zemin koyu metin ister, beyaz okunmaz */

    /* --- Durum: başarı / success --- */
    --dg-success: var(--dg-green-500);
    --dg-success-hover: var(--dg-green-700);
    --dg-success-surface: var(--dg-green-50);
    --dg-success-border: var(--dg-green-100);
    --dg-success-text: var(--dg-green-700);
    --dg-success-on: var(--dg-neutral-0);

    /* --- Durum: bilgi / info --- */
    --dg-info: var(--dg-blue-500);
    --dg-info-hover: var(--dg-blue-700);
    --dg-info-surface: var(--dg-blue-50);
    --dg-info-border: var(--dg-blue-100);
    --dg-info-text: var(--dg-blue-700);
    --dg-info-on: var(--dg-neutral-0);

    /* --- dark / light yardımcıları --- */
    --dg-dark: var(--dg-neutral-900); /* koyu zemin */
    --dg-dark-surface: var(--dg-plum-800); /* koyu panel */
    --dg-dark-border: var(--dg-alpha-white-12);
    --dg-dark-text: var(--dg-neutral-0);

    --dg-light: var(--dg-neutral-100); /* açık zemin */
    --dg-light-surface: var(--dg-neutral-0);
    --dg-light-border: var(--dg-neutral-400);
    --dg-light-text: var(--dg-purple-900);

    /* --- disabled --- */
    --dg-disabled-bg: var(--dg-neutral-200);
    --dg-disabled-surface: var(--dg-neutral-300);
    --dg-disabled-border: var(--dg-neutral-400);
    --dg-disabled-text: var(--dg-neutral-500);
    --dg-disabled-icon: var(--dg-neutral-700);
    --dg-disabled-button: var(--dg-neutral-400);

    /* --- odak halkası — erişilebilirlik için her etkileşimli öğede görünür olmalı --- */
    --dg-focus-ring: var(--dg-brand-accent);
    --dg-focus-ring-offset: var(--dg-neutral-0);

    /* --- metin seçimi (::selection) — tarayıcının mavisi yerine marka moru --- */
    --dg-selection-bg: var(--dg-purple-900);
    --dg-selection-text: var(--dg-neutral-0);

    /* ========================================================
       3. BİLEŞEN TOKEN'LARI
       ======================================================== */

    /* --- Birincil buton --- */
    --dg-btn-primary-default: var(--dg-brand-primary);
    --dg-btn-primary-hover: var(--dg-brand-primary-hover);
    --dg-btn-primary-pressed: var(--dg-brand-primary-pressed);
    --dg-btn-primary-focus-ring: var(--dg-focus-ring);
    --dg-btn-primary-disabled: var(--dg-disabled-button);
    --dg-btn-primary-text: var(--dg-text-on-brand);

    /* --- İkincil buton (çerçeveli) --- */
    --dg-btn-secondary-border: var(--dg-brand-primary);
    --dg-btn-secondary-text: var(--dg-brand-primary);
    --dg-btn-secondary-hover-bg: var(--dg-surface-soft-purple);
    --dg-btn-secondary-hover-border: var(--dg-brand-primary-hover);
    --dg-btn-secondary-pressed-bg: var(--dg-purple-100);
    --dg-btn-secondary-pressed-border: var(--dg-brand-primary-pressed);
    --dg-btn-secondary-disabled-bg: var(--dg-disabled-bg);
    --dg-btn-secondary-disabled-border: var(--dg-disabled-text);

    /* --- Sessiz buton (zeminsiz) --- */
    --dg-btn-ghost-text: var(--dg-brand-primary);
    --dg-btn-ghost-hover-bg: var(--dg-surface-soft-purple);
    --dg-btn-ghost-pressed-bg: var(--dg-purple-100);

    /* --- Yıkıcı buton (sil, iptal et) --- */
    --dg-btn-danger-default: var(--dg-danger);
    --dg-btn-danger-hover: var(--dg-danger-hover);
    --dg-btn-danger-text: var(--dg-danger-on);

    /* --- Input / form --- */
    --dg-input-bg: var(--dg-neutral-0);
    --dg-input-border: var(--dg-border-default);
    --dg-input-text: var(--dg-text-primary);
    --dg-input-placeholder: var(--dg-text-muted);
    --dg-input-hover-border: var(--dg-border-strong);
    --dg-input-focus-border: var(--dg-brand-primary);
    --dg-input-focus-ring: var(--dg-purple-200);
    --dg-input-error-bg: var(--dg-danger-surface);
    --dg-input-error-border: var(--dg-danger);
    --dg-input-error-text: var(--dg-danger-text);
    --dg-input-success-bg: var(--dg-success-surface);
    --dg-input-success-border: var(--dg-success);
    --dg-input-success-text: var(--dg-success-text);
    --dg-input-disabled-bg: var(--dg-disabled-bg);
    --dg-input-disabled-border: var(--dg-disabled-border);
    --dg-input-disabled-text: var(--dg-disabled-text);

    /* --- Navbar --- */
    --dg-header-bg: var(--dg-plum-900); /* header-section-3 koyu zemini */
    --dg-header-text: var(--dg-text-inverse);
    --dg-header-text-hover: var(--dg-brand-accent);
    --dg-header-border: var(--dg-purple-600);
    --dg-header-top-border: #7e17bb; /* üst şerit alt çizgisi — paletteki mor tonlarının arasında kalan ara değer */
    --dg-dropdown-bg: var(--dg-surface-raised);
    --dg-dropdown-text: var(--dg-text-primary);
    --dg-dropdown-hover-bg: var(--dg-surface-soft-purple);

    /* --- Paket filtre barı (p_package_cards) ---
       Koyu zemin üstünde duran iki hap: solda paket türü, sağda ödeme tipi.
       Tasarımdaki tonlar marka paletinden daha parlak/elektrik olduğu için
       kendi token'larını alıyor, ham paletten türetilmiyor. */
    --dg-pkgnav-bg: rgba(20, 12, 40, 0.72); /* hap zemini — arkadaki ışığı hafif geçirir */
    --dg-pkgnav-border: rgba(150, 90, 240, 0.28); /* hap kenarlığı */
    --dg-pkgnav-divider: rgba(150, 110, 230, 0.3); /* öğeler arası ince dikey çizgi */
    --dg-pkgnav-text: #b9a8dd; /* pasif sekme yazısı */
    --dg-pkgnav-icon: #c07df5; /* pasif sekme ikonu — yazıdan parlak */
    --dg-pkgnav-text-hover: #ffffff;
    --dg-pkgnav-active-from: #a855f7; /* aktif hap gradienti — açık uç */
    --dg-pkgnav-active-to: #7c3aed; /* aktif hap gradienti — koyu uç */
    --dg-pkgnav-active-text: #ffffff;
    --dg-pkgnav-active-glow: rgba(168, 85, 247, 0.55); /* aktif hap parlaması */
    --dg-pkgnav-pay-active-bg: #ffffff; /* ödeme filtresinde aktif hap beyaz */
    --dg-pkgnav-pay-active-text: #5b21b6;

    /* --- Paket kartı CTA butonu ---
       Beyaz hap + koyu ok dairesi; hover'da temanın vurgu moruna döner. */
    --dg-cardcta-bg: #ffffff;
    --dg-cardcta-text: #2a0d4e;
    --dg-cardcta-orb-bg: #2a0d4e;
    --dg-cardcta-orb-icon: #ffffff;
    --dg-cardcta-hover-bg: var(--dg-brand-accent); /* temanın varsayılan hover rengi */
    --dg-cardcta-hover-text: #ffffff;

    /* --- Paket kartı özellik listesi --- */
    --dg-cardfeat-text: #d6cfe8; /* madde metni */
    --dg-cardfeat-track: rgba(168, 85, 247, 0.12); /* kaydırma çubuğu yolu */
    --dg-cardfeat-thumb: rgba(168, 85, 247, 0.55); /* kaydırma çubuğu tutamağı */
    --dg-cardfeat-thumb-hover: rgba(168, 85, 247, 0.85);

    /* --- Bölüme özel --- */
    --dg-hero-bg: var(--dg-surface-dark);
    --dg-faq-answer: #6e50b9; /* başlık renginin açık varyantı, ölçekte karşılığı yok */

    /* ========================================================
       4. ALFA KATMANLARI + GÖLGELER
       Saydam beyaz/siyah katmanlar koyu zemin üstünde kullanılır.
       Hazır token olarak tutulur ki her kuralda rgba() yazılmasın.
       ======================================================== */
    --dg-alpha-white-03: rgba(255, 255, 255, 0.03);
    --dg-alpha-white-08: rgba(255, 255, 255, 0.08);
    --dg-alpha-white-10: rgba(255, 255, 255, 0.1);
    --dg-alpha-white-12: rgba(255, 255, 255, 0.12);
    --dg-alpha-white-15: rgba(255, 255, 255, 0.15);
    --dg-alpha-white-16: rgba(255, 255, 255, 0.16);
    --dg-alpha-white-18: rgba(255, 255, 255, 0.18);
    --dg-alpha-white-30: rgba(255, 255, 255, 0.3);
    --dg-alpha-white-60: rgba(255, 255, 255, 0.6);
    --dg-alpha-white-65: rgba(255, 255, 255, 0.65);
    --dg-alpha-white-70: rgba(255, 255, 255, 0.7);
    --dg-alpha-white-75: rgba(255, 255, 255, 0.75);

    --dg-alpha-dark-08: rgba(15, 17, 38, 0.08);
    --dg-alpha-dark-12: rgba(15, 17, 38, 0.12);
    --dg-alpha-dark-22: rgba(15, 17, 38, 0.22);
    --dg-alpha-dark-28: rgba(15, 17, 38, 0.28);
    --dg-alpha-dark-30: rgba(15, 17, 38, 0.3);
    --dg-alpha-dark-55: rgba(15, 17, 38, 0.55);

    --dg-alpha-black-40: rgba(0, 0, 0, 0.4);

    /* Gölge kademeleri — yükseklik arttıkça yayılma artar */
    --dg-shadow-sm: 0 1px 2px var(--dg-alpha-dark-08);
    --dg-shadow-md: 0 4px 12px var(--dg-alpha-dark-12);
    --dg-shadow-lg: 0 12px 28px var(--dg-alpha-dark-22);
    --dg-shadow-xl: 0 24px 48px var(--dg-alpha-dark-28);
    --dg-shadow-focus: 0 0 0 3px var(--dg-input-focus-ring);

    /* ========================================================
       5. GRADIENTLER
       ======================================================== */
    --dg-gradient-header: linear-gradient(90deg, var(--dg-plum-700), #44095e, var(--dg-plum-700));
    --dg-gradient-cta: linear-gradient(90deg, var(--dg-brand-primary), var(--dg-brand-primary-hover));
    --dg-gradient-footer: linear-gradient(90deg, var(--dg-plum-950), var(--dg-plum-800), var(--dg-plum-950));
    --dg-gradient-finder: linear-gradient(105deg, #2a0d4e 0%, var(--dg-plum-600) 55%, var(--dg-plum-500) 100%);
}