/* ============================================================
   token.css — digitech_blackberry temasının renk DIŞI tasarım değişkenleri

   Yükleme sırası: main.css -> color.css -> token.css -> style.css
   color.css'ten sonra gelir (ikisi bağımsız, sıra sadece okunabilirlik için),
   style.css'ten ÖNCE gelir ki style.css buradaki token'ları kullanabilsin.

   Kural: style.css'e sert kodlanmış süre/easing/font-size/radius yazılmaz,
   hepsi buradan var(--dg-*) ile çağrılır. Renk için color.css, ölçü/hareket
   için bu dosya. Yeni bir değer gerekirse önce burada token tanımlanır.

   Katmanlar:
     1. Hareket    — süre + easing (transition/animation)
     2. Tipografi  — boyut ölçeği, ağırlık, satır yüksekliği, harf aralığı
     3. Yuvarlaklık — border-radius ölçeği

   NEDEN ayrı dosya: color.css adı "renk" diyor, 363 satır ve doluydu;
   tipografi/hareket oraya girerse dosya adı yalan olur. Ölçü ve renk
   ayrı eksenler, ayrı dosyada dururlar.
   ============================================================ */

:root {
    /* ========================================================
       1. HAREKET — transition ve animation değerleri

       Ölçüm (refactor öncesi style.css taraması): 76 transition,
       6 farklı süre, 6 farklı easing. Baskın değer 0.25s + ease
       (31 ve 36 kullanım) — bu yüzden "base" o oldu.

       Kullanım: transition: color var(--dg-dur-base) var(--dg-ease);
       ======================================================== */

    /* --- Süreler --- */
    --dg-dur-fast: 0.2s; /* küçük durum değişimi: renk, opaklık */
    --dg-dur-base: 0.25s; /* varsayılan — hover, focus, buton */
    --dg-dur-panel: 0.28s; /* açılır panel — 0.3s'e yuvarlanmadı, ölçülü değer */
    --dg-dur-slow: 0.3s; /* yer değiştiren öğe: kayma, açılma */
    --dg-dur-slower: 0.35s; /* yükseklik/boyut değişimi (accordion) */
    --dg-dur-entrance: 0.5s; /* sayfaya giren öğenin belirmesi */
    --dg-dur-hero: 0.8s; /* hero gibi büyük alan animasyonu */

    /* --- Easing eğrileri --- */
    --dg-ease: ease; /* varsayılan */
    --dg-ease-linear: linear; /* sabit hız — ilerleme çubuğu */
    --dg-ease-in-out: ease-in-out;
    --dg-ease-out: ease-out; /* hizli baslar yavaslar — giris animasyonu */
    /* yumuşak yavaşlama — accordion yüksekliği, uzun mesafe */
    --dg-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* hafif sıçrama — buton basma geri bildirimi */
    --dg-ease-bounce: cubic-bezier(0.34, 1.2, 0.36, 1);
    /* hızlı çıkış, yumuşak iniş — panel açılışı */
    --dg-ease-exit: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- Hazır bileşimler — en sık tekrarlayan üçlü --- */
    --dg-transition-base: var(--dg-dur-base) var(--dg-ease);
    --dg-transition-fast: var(--dg-dur-fast) var(--dg-ease);
    --dg-transition-slow: var(--dg-dur-slow) var(--dg-ease);

    /* ========================================================
       2. TİPOGRAFİ

       Boyut ölçeği px cinsinden: tema zaten px kullanıyor, rem'e
       çevirmek bu turun işi değil (tüm değerleri yeniden ölçmek
       gerekirdi). Ölçek mevcut kullanımdan çıkarıldı — uydurulmadı:
       10/12/13/14/15/16/17/20/22/26/28/32/44/64px geçiyordu,
       yakın olanlar tek adımda toplandı.
       ======================================================== */

    /* --- Boyut ölçeği --- */
    --dg-text-2xs: 10px; /* rozet, çok küçük etiket */
    --dg-text-xs: 12px; /* künye, dipnot, eyebrow */
    --dg-text-sm: 13px; /* kart özellik listesi, ikincil metin */
    --dg-text-base: 14px; /* gövde metni */
    --dg-text-md: 15px;
    --dg-text-lg: 16px; /* vurgulu gövde, menü */
    --dg-text-xl: 20px; /* küçük başlık */
    --dg-text-2xl: 26px; /* bölüm alt başlığı */
    --dg-text-3xl: 32px;
    --dg-text-4xl: 44px;
    --dg-text-5xl: 64px; /* hero başlığı */

    /* --- Ağırlıklar --- */
    --dg-weight-light: 300; /* uzun açıklama metni */
    --dg-weight-normal: 400;
    --dg-weight-medium: 500;
    --dg-weight-semibold: 600; /* menü, kart başlığı */
    --dg-weight-bold: 700; /* bölüm başlığı */
    --dg-weight-extrabold: 800; /* hero, fiyat */

    /* --- Satır yüksekliği --- */
    --dg-leading-tight: 1.1; /* büyük başlık — satırlar sıkışık durmalı */
    --dg-leading-snug: 1.3; /* kart içi kısa metin */
    --dg-leading-normal: 1.5; /* varsayılan */
    --dg-leading-relaxed: 1.7; /* uzun paragraf, yasal metin */

    /* --- Harf aralığı --- */
    --dg-tracking-tight: -0.01em;
    --dg-tracking-normal: normal;
    --dg-tracking-wide: 0.02em;
    --dg-tracking-wider: 1.5px; /* küçük büyük harf etiket */
    --dg-tracking-widest: 2.5px; /* eyebrow — ALL CAPS, seyrek */

    /* ========================================================
       3. YUVARLAKLIK — border-radius ölçeği
       ======================================================== */

    --dg-radius-xs: 2px; /* ince çizgi ucu, ilerleme çubuğu */
    --dg-radius-sm: 4px;
    --dg-radius-md: 8px; /* buton, input */
    --dg-radius-lg: 10px;
    --dg-radius-xl: 14px; /* kart */
    --dg-radius-2xl: 16px;
    --dg-radius-pill: 999px; /* hap/pastil — tamamen yuvarlak uçlar */
    --dg-radius-circle: 50%; /* daire — avatar, ikon kutusu */
}