/* ==========================================================================
   LogWa — Tasarım Token'ları
   --------------------------------------------------------------------------
   Bu dosya mobil uygulamanın `lib/core/design_system/tokens/` altındaki
   token'larının birebir web karşılığıdır. Değerler tahmin edilmedi, koddan
   okundu:

     renkler   → tokens/app_colors.dart
     tipografi → tokens/app_typography.dart
     boşluk    → tokens/app_spacing.dart
     radius    → tokens/app_radius.dart
     hareket   → tokens/app_motion.dart

   KURAL: Hiçbir bileşen dosyası ham hex/px yazmaz. Yeni bir değer
   gerekiyorsa önce buraya token olarak eklenir. Uygulamada renk değişirse
   tek değişecek yer burasıdır.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     ZEMİN / YÜZEY  (app_colors.dart)
     ---------------------------------------------------------------------- */
  --c-background: #0b141a;
  --c-surface: #111b21;
  --c-surface-high: #1f2c34;
  --c-surface-low: #0e1a20;

  /* ----------------------------------------------------------------------
     MARKA
     ---------------------------------------------------------------------- */
  --c-primary: #25d366;
  --c-primary-accent: #00a884;
  --c-selected-card: #10231d;
  --c-selected-border: #1fa855;

  /* İndirim vurgusu (discount paywall) */
  --c-discount: #3b82f6;
  --c-discount-accent: #60a5fa;

  /* Geri sayım / uyarı */
  --c-countdown: #ef4444;
  --c-countdown-soft: #f87171;

  /* "EN İYİ" altın şeridi */
  --c-gold: #f5c64b;
  --c-gold-soft: #ffe29a;

  /* ----------------------------------------------------------------------
     METİN
     ---------------------------------------------------------------------- */
  --c-text-primary: #f5f7f7;
  --c-text-secondary: #a6b0b5;
  --c-text-on-primary: #07130e;

  /*
   * MUTED — UYGULAMADAN BİLİNÇLİ SAPMA (ölçülmüş)
   *
   * Uygulamadaki değer `#6E7A80` (app_colors.dart textMuted). Ölçüldü:
   *   background #0B141A -> 4.21
   *   surfaceLow #0E1A20 -> 4.01
   *   surface    #111B21 -> 3.96
   *   surfaceHigh#1F2C34 -> 3.24
   * Hiçbiri WCAG AA normal metin eşiği 4.5'i geçmiyor.
   *
   * Bu tonun sitedeki baskın kullanımı KÜÇÜK METİN: grafik eksen
   * etiketleri (10-11px), footer sütun başlıkları (11px), caption'lar.
   * Lighthouse taraması bu yüzden 21 öğede kontrast hatası verdi.
   *
   * Önce "yalnızca büyük/kalın metinde kullan" kuralı konmuştu ama bir
   * token'ın kendi ana kullanımında güvensiz olması tuzak; kural
   * uygulanmadı ve hata sızdı. Bunun yerine ton, AA'yı geçen en KOYU
   * değere kadar açıldı — hiyerarşi korunuyor, çünkü textSecondary
   * (#A6B0B5) hâlâ belirgin şekilde daha parlak (7.9 vs 4.6).
   *
   * Yeni değer ölçümleri: 6.07 / 5.77 / 5.70 / 4.67 — dördü de geçer.
   * Bu eşik `tools/check.mjs` içinde test olarak sabitlendi.
   */
  --c-text-muted: #8a959b;

  /* ----------------------------------------------------------------------
     KENARLIK / AYRAÇ
     ---------------------------------------------------------------------- */
  --c-border: #243138;
  --c-divider: #1b262c;

  /* ----------------------------------------------------------------------
     DURUM
     ---------------------------------------------------------------------- */
  --c-success: #25d366;
  --c-warning: #f5c64b;
  --c-danger: #ef4444;

  /* ----------------------------------------------------------------------
     SOHBET BALONLARI (sahte sohbet görselleri için)
     ---------------------------------------------------------------------- */
  --c-bubble-incoming: #1f2c34;
  --c-bubble-outgoing: #005c4b;
  --c-tick-read: #53bdeb;

  /* ----------------------------------------------------------------------
     GRAFİK SERİLERİ
     ---------------------------------------------------------------------- */
  --c-chart-mint: #5be49b;
  --c-chart-teal: #00a884;
  --c-chart-violet: #8b8cf0;

  /* ----------------------------------------------------------------------
     GRADIENT'LER
     Uygulamada butonlarda topLeft→bottomRight uygulanıyor; CSS'te bunun
     karşılığı 135deg.
     ---------------------------------------------------------------------- */
  --g-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-accent) 100%);
  --g-discount: linear-gradient(135deg, var(--c-discount) 0%, var(--c-discount-accent) 100%);
  --g-gold: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-soft) 100%);
  --g-danger: linear-gradient(135deg, var(--c-countdown) 0%, var(--c-countdown-soft) 100%);

  /* Grafik gradient'leri: çubuklarda alttan yukarı, çizgide soldan sağa */
  --g-chart-bar: linear-gradient(to top, var(--c-chart-teal) 0%, var(--c-chart-mint) 100%);
  --g-chart-line: linear-gradient(to right, var(--c-chart-teal) 0%, var(--c-chart-mint) 100%);

  /* ----------------------------------------------------------------------
     TİPOGRAFİ
     ----------------------------------------------------------------------
     Font: Plus Jakarta Sans — uygulama da `google_fonts` ile aynı aileyi
     runtime'da çekiyor, davranış paritesi var.

     ÖLÇEK HAKKINDA BİLİNÇLİ SAPMA:
     Uygulamanın ölçeği 375px referansına göre kurulu ve en büyük başlık
     26sp. Bu mobilde doğru ama 1440px'lik bir ekranda başlık kaybolur.
     Bu yüzden ağırlıklar (w700/w800), negatif letter-spacing ve
     line-height ORANLARI korunur; yalnızca boyutlar `clamp()` ile
     akışkan hale getirilir. clamp'in alt sınırı uygulamanın değerine
     oturur, üst sınır masaüstü için açılır.

     İKİNCİ SAPMA — ERİŞİLEBİLİRLİK:
     Gövde metninin alt sınırları uygulamadaki 11-13px'ten bir kademe
     yukarı çekildi (12-14px). 11px gövde metni web'de WCAG okunabilirlik
     beklentisinin altında kalıyor; mobil uygulamada cihaz yakınlığı bunu
     telafi ediyor, tarayıcıda etmiyor.
     ---------------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Boyutlar — akışkan */
  --fs-hero: clamp(1.875rem, 1.25rem + 3.2vw, 3.5rem);        /* 30 → 56 */
  --fs-display-lg: clamp(1.625rem, 1.25rem + 1.9vw, 2.375rem); /* 26 → 38 (app: 26) */
  --fs-display-md: clamp(1.3125rem, 1.1rem + 1.1vw, 1.75rem);  /* 21 → 28 (app: 21) */
  --fs-headline: clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);   /* 18 → 22 (app: 18) */
  --fs-title: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);     /* 15 → 17 (app: 15) */
  --fs-body-lg: clamp(0.875rem, 0.83rem + 0.25vw, 1rem);       /* 14 → 16 (app: 13) */
  --fs-body-md: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);  /* 13 → 15 (app: 12) */
  --fs-body-sm: clamp(0.75rem, 0.73rem + 0.13vw, 0.8125rem);   /* 12 → 13 (app: 11) */
  --fs-button: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);    /* 14 → 15 (app: 14) */
  --fs-caption: clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);    /* 11 → 12 (app: 10) */
  --fs-counter: clamp(1.875rem, 1.6rem + 1.4vw, 2.375rem);     /* 30 → 38 (app: 32) */

  /* Ağırlıklar */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Satır aralıkları (app_typography.dart `height` değerleri) */
  --lh-hero: 1.08;
  --lh-display-lg: 1.2;
  --lh-display-md: 1.28;
  --lh-headline: 1.3;
  --lh-title: 1.3;
  --lh-body-lg: 1.45;
  --lh-body-md: 1.4;
  --lh-body-sm: 1.35;
  --lh-legal: 1.65; /* legal_view.dart: uzun hukuki paragraflar için */

  /* Harf aralıkları */
  --ls-hero: -0.03em;
  --ls-display-lg: -0.5px;
  --ls-display-md: -0.3px;
  --ls-headline: -0.2px;
  --ls-button: 0.2px;
  --ls-caption: 0.4px;
  --ls-counter: -0.8px;

  /* ----------------------------------------------------------------------
     BOŞLUK  (app_spacing.dart — 4'ün katları)
     ---------------------------------------------------------------------- */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-xxxl: 40px;

  /* Web'e özgü, bölüm ölçeğindeki boşluklar. Mobil uygulamada bir karşılığı
     yok: orada en büyük boşluk 40px, ama bir landing page bölümleri
     birbirinden daha güçlü ayırmak zorunda. */
  --sp-section: clamp(4rem, 2.5rem + 5vw, 7.5rem); /* 64 → 120 */
  --sp-gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem); /* 20 → 40 */

  /* screenPadding: uygulamanın ekran kenarı boşluğu */
  --sp-screen: 24px;

  /* ----------------------------------------------------------------------
     RADIUS  (app_radius.dart)
     ---------------------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px; /* SurfaceCard */
  --r-xl: 28px; /* GlassCard */
  --r-pill: 999px;

  /* ----------------------------------------------------------------------
     HAREKET  (app_motion.dart)
     ---------------------------------------------------------------------- */
  --d-fast: 180ms;
  --d-normal: 320ms;
  --d-slow: 520ms;
  --d-very-slow: 900ms;

  /* Flutter eğrilerinin cubic-bezier karşılıkları */
  --e-enter: cubic-bezier(0.215, 0.61, 0.355, 1);      /* easeOutCubic */
  --e-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);    /* easeInCubic */
  --e-emphasized: cubic-bezier(0.23, 1, 0.32, 1);      /* easeOutQuint */
  --e-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);       /* easeOutBack */

  /* PressScale (press_scale.dart): basma 120ms easeOut, bırakma 380ms
     elasticOut. CSS'te gerçek bir elastic eğri yok; yaklaşık karşılığı
     easeOutBack'in daha abartılı bir hâli. */
  --d-press-in: 120ms;
  --d-press-out: 380ms;
  --e-press-out: cubic-bezier(0.34, 1.8, 0.64, 1);
  --press-scale: 0.97;
  --press-opacity: 0.86;

  /* Sonsuz döngü süreleri — hepsi koddan */
  --d-loop-shine: 2200ms;   /* PrimaryButton _ShineSweep */
  --d-loop-pulse: 1400ms;   /* PrimaryButton pulse */
  --d-loop-shimmer: 1800ms; /* ShimmerMask */
  --d-loop-fill: 1600ms;    /* FillProgressBar parlama */
  --d-loop-aurora: 18s;     /* AuroraBackdrop blob dolaşımı */

  /* ----------------------------------------------------------------------
     GÖLGE / DERİNLİK
     ----------------------------------------------------------------------
     Uygulamada merkezi bir shadow token'ı YOK; gölgeler bileşen içinde
     tanımlı. Aşağıdakiler o bileşenlerden çıkarıldı.

     Önemli: SurfaceCard'ın gölgesi yoktur. Derinlik gölgeyle değil,
     1px hairline + blur + sheen ile anlatılır. Bu kural web'de de geçerli:
     kartlara gölge eklemek uygulamanın dilini bozar.
     ---------------------------------------------------------------------- */
  --sh-glass: 0 14px 28px rgba(0, 0, 0, 0.38); /* GlassCard */

  /* PrimaryButton'ın iki katmanlı renkli glow'u. Renk, buton varyantı
     tarafından --btn-glow ile devralınır. */
  --sh-button: 0 6px 18px var(--btn-glow-near), 0 14px 36px 2px var(--btn-glow-far);

  /* Navbar badge glow */
  --sh-badge: 0 0 8px rgba(239, 68, 68, 0.35);

  /* ----------------------------------------------------------------------
     CAM YÜZEYLER (BackdropFilter karşılıkları)
     ---------------------------------------------------------------------- */
  --blur-glass: 18px;  /* GlassCard */
  --blur-nav: 26px;    /* AppNavBar */
  --blur-locked: 5px;  /* LockedChartArea */
  --blur-aurora: 70px; /* AuroraBackdrop blob */

  /* ----------------------------------------------------------------------
     YERLEŞİM
     ---------------------------------------------------------------------- */
  --w-container: 1200px;
  --w-container-narrow: 760px; /* okuma genişliği: yasal metinler, blog */
  --h-header: 68px;
  --z-header: 100;
  --z-drawer: 200;
  --z-skiplink: 300;
}

/* ==========================================================================
   HAREKETİ AZALT
   --------------------------------------------------------------------------
   Uygulamadaki `MediaQuery.disableAnimationsOf(context)` kuralının web
   karşılığı: tüm sürekli animasyonlar durur, süreler sıfırlanır. İçerik
   asla gizli kalmaz — bunu `animations.css` ve `motion.js` garanti eder.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-normal: 0ms;
    --d-slow: 0ms;
    --d-very-slow: 0ms;
    --d-press-in: 0ms;
    --d-press-out: 0ms;
    --press-scale: 1;
    --press-opacity: 1;
  }
}