/*
 * MSE Portal — tasarım belirteçleri (token)
 * =========================================
 * KAYNAK: Bu dosya mse-crm'in `src/MseCrm.Web/src/styles/tokens.css`
 * dosyasının BİREBİR kopyasıdır (26 Eyl 2026). Bilerek bölünmedi ve
 * sadeleştirilmedi: portal kabuğu ile CRM'in aynı görsel sözleşmeyi
 * okuması, ileride bu dosyanın ortak kabuk paketine çıkarılmasını
 * mekanik bir işe indirger (bkz. docs/01_Kabuk_Tasarimi.md §5).
 *
 * Bu yüzden portalda kullanılmayan belirteçler de (partner/pending anlam
 * renkleri, yönetim şeridi vb.) DURUYOR — silmek iki dosyayı ayırır ve
 * "hangisi doğru" sorusunu doğurur. İkisi ayrışacaksa bilinçli ayrışsın.
 *
 * Aşağısı mse-crm'in kendi başlığıdır:
 * ------------------------------------
 * MSE CRM — tasarım belirteçleri (token)
 * Karar 6: bu üründe workspace'in Steep/kurumsal-tasarim dili UYGULANMAZ.
 * SEÇİM (İlhan, 11 Eyl 2026): "D · Atlas" düzeni + "F · Nabız" paleti —
 * Manrope, mavi-gri zemin, okyanus mavisi tek vurgu, 6/10/14 px yarıçap.
 * Mock'lar: docs/design-mocks/index-DEF.html (D-atlas-*.html son hâlidir).
 *
 * Kural: renk, yarıçap ve font YALNIZ buradan değişir. Bileşenlerde ham
 * hex, ham px yarıçap ve font adı yazılmaz — hepsi `var(--...)` okur.
 * Dil ilerde ayarlanırsa YALNIZ bu dosya değişir, uygulama olduğu gibi kalır.
 *
 * Anlam renkleri (UX-04 — renk yalnız anlam taşır):
 *   --color-danger   🔴  YALNIZ eşik aşımı (SLA breach, FIR-06)
 *   --color-pending  🟡  YALNIZ teyit bekliyor (won_pending, FIR-11)
 *   --color-partner  🟣  YALNIZ partner tescilli (FIR-13)
 * "Yaklaşan" (near) için amber KULLANILMAZ — nötr/ince ipucu verilir,
 * yoksa amber iki anlam taşır ve ikisi de okunmaz olur.
 */

:root {
  /* --- yüzey ve metin --- */
  --color-bg: #eef1f8;
  --color-surface: #ffffff;
  --color-surface-2: #f4f6fb;
  --color-border: #e3e7f0;
  --color-text: #22262f;
  --color-muted: #737a8a;

  /* --- vurgu (tek renk; trex hex'i gelince YALNIZ burası değişir) --- */
  --color-accent: #2f6fed;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #e8efff;

  /* --- anlam renkleri --- */
  --color-danger: #c62f27;
  --color-danger-soft: #fdeceb;
  --color-pending: #9a5300;
  --color-pending-soft: #fdf3e2;
  --color-partner: #6a3bb5;
  --color-partner-soft: #f0eafb;
  --color-ok: #1f7a4d;
  --color-ok-soft: #e8f5ee;

  /* --- yarıçap --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* --- tipografi --- */
  /* Manrope kendi paketinden gelir (@fontsource-variable/manrope, app.css'te
     import edilir): PWA çevrimdışıyken de aynı yazı tipi yüklenir; Google
     Fonts'a bağımlılık yok. */
  --font-sans:
    'Manrope Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* --- boşluk ölçeği (4px tabanlı) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- kenar boşluğu (gutter) — İlhan kararı, 8 Eyl 2026 ---------------
     "Hiçbir alan, düğme veya etiket pencere kenarına yapışmaz."
     TEK KAYNAK burasıdır: `PageShell`, üst şerit ve alt sekme çubuğu aynı
     değeri okur. Üç dosyaya kopyalanan bir sayı üçüncü ekranda tutmaz —
     şikâyet ("her şey sola yapışık") tam olarak böyle doğdu.
     Kırılımlar CLAUDE.md'deki karardır: mobil 16 · tablet 24 · masaüstü 32. */
  --gutter: 16px;

  /* --- yoğunluk (tercihler → "Ferah" / "Sıkışık") ---
     Yoğunluk YALNIZ bu dört ölçüyü değiştirir: alan yüksekliği, satır
     dolgusu, kart dolgusu, menü satırı. Yazı boyutuna dokunulmaz — küçülen
     yazı "daha çok satır" değil "okunmayan ekran" demektir.

     DENETİM (8 Eyl): bu dört bildirim eskiden `@media (min-width: 1024px)`
     bloğunun İÇİNDE ama bir seçicinin DIŞINDA duruyordu. Bu geçersiz CSS'tir;
     tarayıcı satırları atar ve `--card-pad` HİÇ TANIMLANMAZ. Sonuç:
     `p-[var(--card-pad)]` geçersiz değere düşüp dolguyu 0'a indiriyor, her
     kartın içeriği kenarına yapışıyordu. Değerler artık `:root`ta. */
  --control-h: 40px;
  --row-py: 8px;
  --card-pad: 16px;
  --nav-item-h: 36px;

  /* --- gölge --- */
  --shadow-sm: 0 1px 2px rgb(30 40 80 / 5%);
  --shadow-md: 0 6px 20px rgb(30 40 80 / 7%);

  /* --- yönetim düzlemi şeridi (/admin) ---
     Bilinçli olarak KOYU ve temadan bağımsız: kiracı uygulaması beyaza
     döndüğünde bile operatör hangi düzlemde olduğunu şeritten anlar (AOS
     ile aynı karar). Yine de token olarak durur ki tasarım yönü seçilince
     tek yerden değişsin. */
  --admin-bar-bg: #17191c;
  --admin-bar-fg: #ffffff;
  --admin-bar-muted: rgb(255 255 255 / 72%);
  --admin-bar-hover: rgb(255 255 255 / 10%);
  --admin-bar-line: rgb(255 255 255 / 22%);

  /* --- düzen ölçüleri --- */
  --shell-sidebar-w: 248px;
  /* Daraltılmış menü: yalnız ikon şeridi (44px hedef + kenar boşluğu). */
  --shell-rail-w: 60px;
  --shell-topbar-h: 56px;
  --shell-tabbar-h: 60px;
  --tap-min: 44px; /* UX-07: büyük dokunma alanı */

  /* Form alanı yazı boyutu (denetim Y1).
     iOS Safari 16px ALTINDAKİ bir alana odaklanınca sayfayı yakınlaştırır ve
     geri uzaklaştırmaz; düzen kayar, alt sekme çubuğu ekran dışına çıkar.
     Bu yüzden alan yazısı mobilde 16px'tir; masaüstünde yoğunluk için
     gövde ölçüsüne (`--text-base`) döner (bkz. aşağıdaki `min-width` bloğu). */
  --text-field: 1rem;

  /* Alt sekme çubuğunun ÜSTÜNE oturan sabit katmanların tabanı (denetim O1).
     Toast, güncelleme şeridi ve iOS ipucu bu tek ifadeyi okur; formül üç
     dosyaya kopyalandığında biri çentikli cihazın güvenli alanını unutuyor
     ve şerit sekme çubuğunun altında kalıyordu. */
  --above-tabbar: calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom) + 16px);
}

/*
 * Masaüstü yoğunluğu: alanlar gövde ölçüsüne döner.
 * Kırılma noktası `lg` (1024px) — `md` (768px) iPad'i dikeyde masaüstü
 * sayarak hem sol menüyü hem alt çubuğu kaybettiriyordu (denetim O3).
 */
@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-field: var(--text-base);
    --gutter: 32px;
  }
}

[data-density='compact'] {
  --control-h: 34px;
  --row-py: 4px;
  --card-pad: 12px;
  --nav-item-h: 30px;
}

/*
 * KOYU TEMA İKİ YERDE TANIMLI ve bu bilinçlidir:
 *   • `@media (prefers-color-scheme: dark)` yalnız `data-theme` HENÜZ
 *     yazılmamışken geçerlidir — JavaScript çalışana kadarki ilk karede
 *     koyu tema kullanıcısına beyaz ekran göstermemek için,
 *   • `[data-theme='dark']` ise tercihin kendisidir ("sistem" seçiliyse
 *     `lib/prefs.ts` çözülmüş değeri yazar).
 * Değerler değişirse İKİSİ BİRDEN değişir; palet tek bir liste olarak
 * okunmalı, bu yüzden ayrı dosyaya bölünmedi.
 */
[data-theme='dark'] {
  --color-bg: #12151c;
  --color-surface: #191d26;
  --color-surface-2: #20252f;
  --color-border: #2c323e;
  --color-text: #e8eaef;
  --color-muted: #98a0ae;

  --color-accent: #7fa3ff;
  --color-accent-contrast: #0c1220;
  --color-accent-soft: #1c2743;

  --color-danger: #f2837a;
  --color-danger-soft: #2e1614;
  --color-pending: #e0a34a;
  --color-pending-soft: #2b2011;
  --color-partner: #b294f0;
  --color-partner-soft: #221a33;
  --color-ok: #5cc08c;
  --color-ok-soft: #12291d;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 45%);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #12151c;
    --color-surface: #191d26;
    --color-surface-2: #20252f;
    --color-border: #2c323e;
    --color-text: #e8eaef;
    --color-muted: #98a0ae;

    --color-accent: #7fa3ff;
    --color-accent-contrast: #0c1220;
    --color-accent-soft: #1c2743;

    --color-danger: #f2837a;
    --color-danger-soft: #2e1614;
    --color-pending: #e0a34a;
    --color-pending-soft: #2b2011;
    --color-partner: #b294f0;
    --color-partner-soft: #221a33;
    --color-ok: #5cc08c;
    --color-ok-soft: #12291d;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
  }
}