/*
    Tasarım jetonları — mobil uygulamayla ORTAK kaynak.

    Değerlerin tamamı mobildeki Resources/Styles/Colors.xaml ve AppStyles.xaml
    dosyalarından birebir taşındı. İki platformun yan yana aynı görünmesi bu dosyanın
    o iki dosyayla aynı kalmasına bağlı; bir tonu burada değiştirirken orada da
    değiştirmek gerekiyor.

    Not (WEB-PLAN §7): orta vadede kaynak design-tokens.json olacak ve hem bu dosya
    hem XAML sözlüğü ondan üretilecek. O gün gelene kadar tek doğruluk kaynağı mobil
    tema dosyaları; buradaki her satırın karşılığı orada var.
*/

:root {
    /* ── Marka merdiveni ─────────────────────────────────────────────────── */
    --brand-ink: #063A44;
    --brand-deep: #08535E;
    --brand: #0B6E79;
    --brand-lift: #10919E;
    --brand-accent: #17BFCE;

    --brand-soft: #E7F5F7;
    --brand-secondary: #D3ECEF;
    --brand-tertiary: #0A4C55;

    /* ── Nötrler (slate) ─────────────────────────────────────────────────── */
    --gray-50: #F5F8F9;
    --gray-100: #EAF0F3;
    --gray-200: #D8E1E7;
    --gray-300: #B5C2CB;
    --gray-400: #8896A1;
    --gray-500: #61707C;
    --gray-600: #414F59;
    --gray-700: #2B363F;
    --gray-900: #141A20;
    --gray-950: #0C1014;

    /* ── Anlam taşıyan renkler ───────────────────────────────────────────── */
    --status-pending: #DE9A12;
    --status-in-progress: #2C7EF8;
    --status-ready: #7457F0;
    --status-completed: #0F9E5F;
    --status-cancelled: #78868F;

    --danger: #E03B4E;
    --warning: #F0A81E;
    --success: #0F9E5F;
    --info: #2C7EF8;

    /* ── Yüzeyler ────────────────────────────────────────────────────────── */
    --surface: #FFFFFF;
    --canvas: #F2F7F8;
    --border: #E4EBEF;
    --border-inner: #E8EFF3;
    --shadow-ink: #083039;

    /* Bağlantı metni. Koyu temada ayrı tanımlanıyor; bkz. aşağıdaki blok. */
    --link: #0B6E79;

    /* Marka yumuşak zemininin üstündeki yazı/ikon rengi (çip, bölüm ikonu, rozet). */
    --on-brand-soft: #0B6E79;

    /* Sayfa zemini düz renk değil; markaya çalan çok soluk bir geçiş. */
    --canvas-gradient: linear-gradient(180deg, #F8FCFC 0%, #F0F6F8 55%, #E8F1F3 100%);
    --surface-gradient: linear-gradient(180deg, #FFFFFF 0%, #FAFDFE 100%);
    --surface-inner-gradient: linear-gradient(180deg, #F6FAFB 0%, #EDF4F6 100%);

    /* Ekranların tepesindeki renkli blok: marka merdiveninin dört basamağı. */
    /*
        ── Hero şeridi ─────────────────────────────────────────────────────────
        Eskiden dolu, doygun bir marka levhasıydı: üst çubuğun hemen altında ikinci
        bir renk kütlesi olarak duruyor ve sayfanın en gürültülü öğesi oluyordu
        ("çok göze batıyor ve gözü yoruyor"). Oysa hero bir başlık; ekranın kendisi
        değil.

        Artık ZEMİNİN ÜSTÜNE ÇALAN ince bir cam: sayfa rengi altından görünüyor,
        yazı beyaz değil normal metin rengi. Gürültü gitti, kimlik kaldı — renk
        paletine yeni bir ton da girmedi, aynı marka merdiveni saydamlaştı.
    */
    --hero-gradient: linear-gradient(135deg,
        rgba(11, 110, 121, 0.13) 0%,
        rgba(16, 145, 158, 0.10) 45%,
        rgba(23, 191, 206, 0.13) 100%);

    /* Hero'nun kendi öğeleri: yazı, kutucuk zemini, alt kenar. */
    --hero-ink: var(--gray-900);
    --hero-ink-soft: var(--gray-500);
    --hero-tile: rgba(11, 110, 121, 0.10);
    --hero-tile-border: rgba(11, 110, 121, 0.20);
    --hero-edge: rgba(11, 110, 121, 0.16);
    --brand-tile-gradient: linear-gradient(160deg, #10919E 0%, #0B6E79 55%, #08535E 100%);

    --warning-surface: linear-gradient(150deg, #FEF7E6 0%, #FBEDD0 100%);
    --warning-border: #F3DAA6;
    --warning-text: #8A5A05;
    --accent-surface: linear-gradient(150deg, #EDF8F9 0%, #E1F2F5 100%);

    /* ── Tipografi ölçeği (8 basamak) ────────────────────────────────────── */
    --font-xs: 11.5px;
    --font-sm: 12.5px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16.5px;
    --font-xl: 18.5px;
    --font-2xl: 21px;
    --font-3xl: 24.5px;

    --font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* ── Geometri ────────────────────────────────────────────────────────── */
    --radius-card: 18px;
    --radius-inner: 14px;
    --radius-chip: 10px;
    --radius-button: 14px;
    --radius-hero: 26px;
    --radius-pill: 999px;

    /* ── Gölge ───────────────────────────────────────────────────────────── */
    /* Nötr siyah değil marka mürekkebi: turkuaz bir arayüzün altında gri gölge
       "kirli", mürekkep gölge "derin" duruyor. */
    --shadow-card: 0 5px 14px rgba(8, 48, 57, 0.09);
    /* Saydam şeride ağır gölge yakışmıyor; yalnızca kavisin altını belli ediyor. */
    --shadow-hero: 0 4px 12px rgba(6, 58, 68, 0.07);
    --shadow-tile: 0 8px 16px rgba(8, 83, 94, 0.32);

    /* ── Yerleşim ────────────────────────────────────────────────────────── */
    /* Mobildeki 680 DIP içerik kolonunun karşılığı (bkz. Presentation/Responsive.cs). */
    --content-max: 680px;
    --page-pad: 14px;

    /* ── Hareket ─────────────────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --dur-fast: 120ms;
    --dur-base: 170ms;
}

/*
    Koyu tema.

    ── Neden prefers-color-scheme DEĞİL ────────────────────────────────────────
    Kullanıcının kendi seçimi var (açık / koyu / sistem). Bunu medya sorgusuyla
    yapmanın tek yolu aynı 30 satırlık paleti iki ayrı seçici altında TEKRARLAMAK
    olurdu — biri medya sorgusunda, biri [data-theme="dark"] altında. İki listeden
    birini güncellemeyi unutmak, temanın yarısının eski renkte kalması demek.

    Onun yerine tercih tek bir yerde çözülüyor ve sonucu <html data-theme> olarak
    yazılıyor:
      · Açık/koyu seçiliyse sunucu çerezden okuyup doğrudan yazıyor (yanıp sönme yok).
      · "Sistem" seçiliyse <head> içindeki küçük betik matchMedia ile çözüyor.
    Palet burada, tek listede duruyor.
*/
:root[data-theme="dark"] {
    /*
        Tarayıcıya temayı söylüyoruz: form denetimleri (yazı alanı, açılır liste,
        kaydırma çubuğu) kendi varsayılan AÇIK renklerini kullanmayı bıraksın.
        Bu satır olmadan koyu sayfada beyaz bir metin kutusu kalıyordu.
    */
    color-scheme: dark;

    /*
        Gri merdiven TERS çevriliyor.

        Açık temada --gray-900 metin, --gray-50 zemin demek. Koyu temada yalnızca
        yüzeyleri koyulaştırmak yetmiyordu: metin rengi hâlâ --gray-900 (#141A20)
        olduğu için koyu zeminde okunmuyordu — giriş ekranında yazılan şifre
        görünmüyordu. Merdiveni burada ters çevirince "900 = en kuvvetli metin"
        kuralı iki temada da geçerli kalıyor ve bileşenlerin hiçbirini
        değiştirmek gerekmiyor.
    */
    --gray-50: #0C1014;
    --gray-100: #141A20;
    --gray-200: #2B363F;
    --gray-300: #414F59;
    --gray-400: #61707C;
    --gray-500: #93A2AD;
    --gray-600: #B9C6D0;
    --gray-700: #D8E1E7;
    --gray-900: #ECF2F5;
    --gray-950: #FFFFFF;

    /*
        Marka yumuşak tonu koyu temada neredeyse siyaha çalıyordu (#0D2E34): çipler,
        bölüm ikonları ve "Sistem" rozeti kapalı bir leke gibi duruyordu. Bir kademe
        açıldı ve üstündeki yazı için ayrı bir ton tanımlandı — #0B6E79 bu zeminde
        okunmuyordu.
    */
    --brand-soft: #17434C;

    --surface: #151D23;
    --canvas: #0B1014;
    --border: #26313A;
    --border-inner: #28323C;

    --canvas-gradient: linear-gradient(180deg, #101820 0%, #0B1014 60%, #080C10 100%);
    --surface-gradient: linear-gradient(180deg, #19222A 0%, #131B22 100%);
    --surface-inner-gradient: linear-gradient(180deg, #1F2933 0%, #19222A 100%);

    --warning-surface: linear-gradient(150deg, #392B10 0%, #2B2009 100%);
    --warning-border: #59461A;
    --warning-text: #F2C978;
    --accent-surface: linear-gradient(150deg, #12333A 0%, #0C262C 100%);

    --shadow-card: 0 5px 14px rgba(0, 0, 0, 0.45);

    /* Koyu zeminde marka tonu okunmuyor; mobildeki PrimaryDark karşılığı. */
    --brand-on-dark: #4FD9E1;

    /* Marka yumuşak zemininin üstündeki yazı/ikon rengi. */
    --on-brand-soft: #6FE0E8;

    --hero-gradient: linear-gradient(135deg,
        rgba(23, 191, 206, 0.15) 0%,
        rgba(16, 145, 158, 0.10) 45%,
        rgba(8, 83, 94, 0.05) 100%);

    --hero-tile: rgba(255, 255, 255, 0.07);
    --hero-tile-border: rgba(255, 255, 255, 0.12);
    --hero-edge: rgba(79, 217, 225, 0.16);
    --shadow-hero: 0 6px 18px rgba(0, 0, 0, 0.26);

    /* Bağlantı ve vurgu metni: #0B6E79 koyu zeminde neredeyse görünmüyor. */
    --link: #4FD9E1;
}

/*
    Masaüstü basamağı.

    ── Neden gerekli ───────────────────────────────────────────────────────────
    Yukarıdaki ölçek MOBİLDEN geldi: 14 piksel gövde, 11,5 piksel yardımcı metin.
    Telefonda doğru — ekran göze 25-30 cm uzakta. Masaüstünde ekran 60-70 cm uzakta
    ve aynı sayılar oraya küçük düşüyordu: plaka, fiyat, yıkama yeri durumu gibi
    ASIL veriler okunmak için yaklaşmayı gerektiriyor, yanlarındaki düğmeler ise
    olduğundan büyük duruyordu. Kullanıcının tarifi: "önemli veriler küçük
    gözüküyor ama bir buton boydan boya kaplamış".

    Çözüm tek yerde: aynı sekiz basamak, geniş ekranda bir kademe yukarı. Hiçbir
    bileşene dokunmak gerekmiyor — hepsi bu jetonları kullanıyor. Oran korunuyor,
    yalnızca zemin yükseliyor.
*/
@media (min-width: 900px) {
    :root {
        --font-xs: 12.5px;
        --font-sm: 13.5px;
        --font-base: 15px;
        --font-md: 16.5px;
        --font-lg: 18.5px;
        --font-xl: 21px;
        --font-2xl: 24px;
        --font-3xl: 28px;

        /* Yazı büyüyünce nefes alanı da büyümeli; aksi hâlde kartlar sıkışıyor. */
        --page-pad: 20px;

        /* Dar kolon 680 pikselde kalırsa 15 piksellik gövdeyle satırlar kısalıyor. */
        --content-max: 760px;
    }
}

/*
    Hareketi azalt: süreler burada bilerek SIFIRLANMIYOR.

    Eskiden --dur-fast / --dur-base bu tercihte sıfırdı. Bu yalnızca kaymayı değil renk
    geçişlerini de kapatıyordu: işletim sisteminde animasyonları kapatan kullanıcıda (Windows'ta
    "Animasyon efektleri") düğmenin rengi üzerine gelince yumuşak değişmek yerine bir anda
    atlıyordu. Hareket (basınca küçülme, bildirimin kayarak gelmesi, açılış) app.css'teki
    reduced-motion bloğunda tek tek kapatılıyor; renk ve saydamlık geçişleri kalıyor.
*/