/* ============================================================
 * tokens.css — Astronya tasarım token'ları
 *
 * Dil: MÜREKKEP & MOR IŞIMA (kullanıcının "Capi" referansı,
 * 2026-07-05): zifiri koyu zemin + tepeden süzülen TEK parça
 * menekşe ışıma perdesi (--bg-grad), üstünde koyu mürekkep
 * kartlar (çizgisiz, backdrop blur, ince ışık kenarı). Birincil
 * aksiyon beyaz pill; FAB/gönder/kullanıcı balonu magenta→menekşe.
 * Aktiflik: chip'lerde mor gradient pill; SEKME aktifliği cam
 * kademe/üst çizgi (gradient pill söküldü 2026-07-19 — cam dili
 * yayılımı: yüzeyler surface+blur, gradient yalnız vurgu aksanı).
 * TEK TEMA (2026-07-19): açık tema tamamen söküldü — koyu görünüm
 * tek ve varsayılan, çeşitlilik vurgu paletinden ([data-accent]).
 * İkonlar yerel Font Awesome — projede SVG/görsel varlık yok.
 * ============================================================ */

:root {
  /* Tipografi — Inter (yerel değişken font, fonts.css); başlıklar
     700'ü aşmaz — 800 "komik bold" bulundu (kullanıcı, 2026-07-05) */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", monospace;

  /* Ölçek — iri, yumuşak köşeler */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Sekme kartı reçetesi — eski .card primitifi 2026-07-19'da ÖLDÜ
     (ALTIN KURAL K1/K4): her kart kendi kimlik bloğundan boyanır,
     ortak değerler yalnız bu iki var. Kartı reçeteden ayırmak =
     kendi bloğunda ezmek (balance-card padding'i gibi). */
  --card-r: var(--r-lg);
  --card-pad: 18px;

  /* Daire ölçeği — ikon dairesi/avatar boylarının TEK kaynağı
     (2026-07-19 normalizasyonu: 26/30/34/36/40/42 çap kalabalığı
     bu beş kademeye yuvarlandı). Nokta sınıfı süsler (rozet, kayıt
     noktası, slider başparmağı, ≤18px) ölçek DIŞI kalır. Bölgenin
     kendi var'ı varsa değeri buradan alır (--chat-circle gibi);
     yeni daire açarken önce buradan kademe seç. */
  --circle-xs: 22px;   /* mini tuş/rozet dairesi: ccheck, cl-ic, bilgi (i) */
  --circle-sm: 32px;   /* kart-içi tuşlar: ikon-başlık/kapat aileleri, vp-btn */
  --circle-md: 38px;   /* krom tuşları: icon-btn, geri okları, yüzen filtreler */
  --circle-lg: 46px;   /* avatar birimi: .avatar, .cn-ic */
  --circle-xl: 48px;   /* chat dairesi (--chat-circle buradan içer) */

  /* ── VURGU AİLESİ — TEK KAYNAK (2026-07-18) ──────────────────
     Marka vurgusu 5 tonluk bir AİLEDİR. Her ton önce RGB ÜÇLÜSÜ
     (--*-rgb) olarak tanımlanır; düz renkler,
     gradient'ler ve alfa'lı tüm kullanımlar ondan türer.
     BAĞLAYICI KURAL: aileye giren hiçbir renk (gradient içi dahil)
     webapp'te literal yazılmaz — ya düz token (var(--accent-pop)) ya
     üçlüden alfa (rgba(var(--accent-rgb), .5)). Palet değiştirmek =
     5 üçlü satırı; paletler dosya sonundaki [data-accent] blokları
     (core/theme.js basar, seçim ayar popup'ında). */
  --accent-rgb: 139, 92, 246;          /* ana vurgu (menekşe) */
  --accent-strong-rgb: 124, 58, 237;   /* koyu uç — perde/glow/derinlik */
  --accent-pop-rgb: 232, 121, 249;     /* parlak sıçrama — gradient'in canlı ucu */
  --accent-bright-rgb: 167, 139, 250;  /* açık ton — spinner/dalga/ince vurgu */
  --accent-cool-rgb: 59, 130, 246;     /* soğuk refakatçi — zemin ışıma köşeleri */

  --accent: rgb(var(--accent-rgb));
  --accent-strong: rgb(var(--accent-strong-rgb));
  --accent-pop: rgb(var(--accent-pop-rgb));
  --accent-bright: rgb(var(--accent-bright-rgb));
  --accent-cool: rgb(var(--accent-cool-rgb));
  --accent-soft: rgba(var(--accent-rgb), .16);
  --accent-grad: linear-gradient(135deg, var(--accent-pop) 0%, var(--accent) 100%);
  --on-accent: #ffffff;

  /* --hero-grad ÖLDÜ (2026-07-20, kullanıcı): sistemin TEK gradient
     listesi artık settings.css [data-bgg] KATALOĞU. Popup/premium
     yüzeyler background-image: var(--bgg-img, none) devralır —
     deseni + rengi kökte features/settings damgalar ("Popup
     arkaplanı" bölümü; varsayılan desen "kose", renk vurgu). */

  /* Cam — tüm yüzen yüzeylerin ortak reçetesi */
  --glass-blur: blur(24px) saturate(160%);

  /* ── DURUM AİLESİ — vurgu ailesiyle aynı desen (2026-07-19) ──
     Üçlü + düz + soft türevleri tek yerde. Feature dosyasında bu
     ailenin literal kopyası YASAK — ya düz token ya
     rgba(var(--*-rgb), α). */
  --ok-rgb: 52, 201, 142;      /* #34c98e */
  --warn-rgb: 229, 165, 75;    /* #e5a54b */
  --danger-rgb: 242, 85, 107;  /* #f2556b */
  --danger-strong: #d63552;    /* hover — koyu kırmızı */
  --ok: rgb(var(--ok-rgb));
  --warn: rgb(var(--warn-rgb));
  --danger: rgb(var(--danger-rgb));
  --ok-soft: rgba(var(--ok-rgb), .16);
  --warn-soft: rgba(var(--warn-rgb), .16);
  --danger-soft: rgba(var(--danger-rgb), .16);

  /* Geçişler */
  --tr-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --tr-med: 240ms cubic-bezier(.4, 0, .2, 1);

  /* Z katmanları */
  --z-sheet: 60;
  --z-modal: 80;
  --z-toast: 100;
  --z-splash: 120;
  --z-gate: 130;   /* boot'u bloklayan sözleşme gate'i — splash'in ÜSTÜNDE
                      olmak zorunda: main.js splash'i kapatmadan önce
                      checkAndBlock'u await ediyor */

  /* Güvenli alan — STATİK token'lar (kök kilidi mimarisi, base.css,
     2026-07-12). env(safe-area-inset-*) mobilde tarayıcı bar
     animasyonuyla CANLI değişebilir (Chrome edge-to-edge / iOS toolbar)
     → doğrudan kullanan konum/padding zıplar. CSS'te HER ZAMAN bu
     token'lar kullanılır, çıplak env() yazılmaz.
     Desen: 'max' varyantı (Chrome 139+) bar durumundan bağımsız SABİT;
     desteksiz tarayıcıda iç fallback devreye girer (iOS: üst çentik
     zaten statik, alt inset tarayıcıda 0). DİKKAT: @supports ile
     seçilemez — env isimleri parse'ta doğrulanmadığından test her
     yerde geçer, desteksiz tarayıcıda değer 'hesaplama anında geçersiz'
     olur ve bottom'lar sessizce çöker (2026-07-12'de yaşandı). */
  --safe-top: env(safe-area-max-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));

  /* Kök kilidi × Chromium "implicit root scroller" TERFİSİ (2026-07-12,
     HUD ölçümüyle bulundu): viewport'u PİKSEL PİKSEL dolduran iç
     scroller belge kökü yerine geçmeye terfi eder ve URL bar'ını
     oynatma yetkisini alır — kilit delinir; bar gizlenince ICB büyür,
     absolute katmanların hepsi 56px zıplar. Heuristik'in standart bir
     kapatma anahtarı YOK; tek kaldıraç terfi ÖN ŞARTINI (tam doluluk)
     bozmak. MİMARİ KURAL: tam-ekran scroller (veya onu saran kap) bu
     payı üstten yer — görünmez (çubuk paylarının altında kalır).
     Uygulayanlar: .chat-msgs (chat.css) + .side-pages (shell.css,
     mobil). Yeni tam-ekran scroller eklerken UYGULA. */
  --rootlock-inset: 1px;
}

/* ── ZEMİN & YÜZEYLER — mürekkep cam ────────────────────────── */
:root {
  color-scheme: dark;
  /* Zemin: zifiri koyu + tepeden süzülen menekşe ışıma perdesi (Capi
     referansı — çok renkli aurora blob'ları DEĞİL, tek tutarlı perde;
     ~%60 yükseklikte söner, alt taraf koyu kalır). */
  --bg: #0a0a10;
  --bg-grad:
    radial-gradient(140% 85% at 50% -22%, rgba(var(--accent-strong-rgb), .48) 0%, rgba(var(--accent-strong-rgb), .16) 46%, transparent 68%),
    radial-gradient(70% 45% at 96% -4%, rgba(var(--accent-cool-rgb), .16), transparent 60%);
  /* Yüzeyler — girişler/chip'ler için yarı saydam beyaz cam */
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .085);
  --surface-3: rgba(255, 255, 255, .14);
  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .20);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .10);
  /* Panel = opak-ımsı mürekkep (modal/sheet/toast/dd/banner —
     arkasında karartma olmayan yüzeylerde de okunaklı kalır) */
  --panel-bg: rgba(17, 14, 34, .92);
  /* Metin merdiveni — nötr gri, her kademe bir öncekinin %5 koyusu
     (243 → 231 → 219 → 208) */
  --text: #f3f3f3;
  --text-2: #e7e7e7;
  --text-3: #dbdbdb;
  --text-4: #d0d0d0;   /* en silik kademe — süs ikonları/dipnot */

  /* Kontrast pill — birincil buton / aktif sekme */
  --contrast-bg: #ffffff;
  --contrast-text: #0c0c10;

  /* Yarı saydam krom (sohbet başlığı, giriş şeridi, dock, sticky) */
  --chrome: rgba(10, 9, 20, .62);
  --backdrop: rgba(0, 0, 0, .6);

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 36px rgba(0, 0, 0, .45);
  --shadow-3: 0 28px 72px rgba(0, 0, 0, .58);

  --bubble-user: var(--accent-grad);
  --bubble-user-text: #fff;
  --bubble-bot: rgba(255, 255, 255, .075);
  --bubble-bot-text: var(--text);
  --scrollbar: rgba(255, 255, 255, .16);
}

/* ── VURGU PALETLERİ — [data-accent] ─────────────────────────
   Varsayılan palet ("mor" / attribute yok) = :root'taki aile.
   Her palet YALNIZ 5 üçlüyü ezer — düz renkler/gradient'ler/alfa'lar
   üçlüden türediği için kendiliğinden döner. Kök seçimi core/theme.js
   html'e basar (LS.accent); seçici bilerek çıplak [data-accent]:
   ayar popup'ındaki swatch butonu da aynı attribute'la KENDİ paletini
   yerelde kuşanır (önizleme tek kaynaktan — settings.css .stp-acc).
   Yeni palet = 5 satırlık bir blok + theme.js ACCENTS'e bir satır.
   ÖZEL renk ("custom") burada blok TAŞIMAZ: theme.js familyFromHex
   tek hex'ten aileyi türetip üçlüleri html'e INLINE basar (K5:
   veri-türevi var beslemesi) — inline, attribute bloklarını ezer. */
[data-accent="mavi"] {
  --accent-rgb: 59, 130, 246;          /* mavi */
  --accent-strong-rgb: 37, 99, 235;
  --accent-pop-rgb: 34, 211, 238;      /* camgöbeği ucu */
  --accent-bright-rgb: 96, 165, 250;
  --accent-cool-rgb: 139, 92, 246;     /* menekşe refakatçi */
}
[data-accent="deniz"] {
  --accent-rgb: 6, 182, 212;           /* camgöbeği */
  --accent-strong-rgb: 8, 145, 178;
  --accent-pop-rgb: 52, 211, 153;      /* zümrüt ucu */
  --accent-bright-rgb: 34, 211, 238;
  --accent-cool-rgb: 59, 130, 246;
}
[data-accent="zumrut"] {
  --accent-rgb: 16, 185, 129;          /* zümrüt */
  --accent-strong-rgb: 5, 150, 105;
  --accent-pop-rgb: 45, 212, 191;      /* turkuaz ucu */
  --accent-bright-rgb: 52, 211, 153;
  --accent-cool-rgb: 6, 182, 212;
}
[data-accent="gul"] {
  --accent-rgb: 236, 72, 153;          /* gül pembesi */
  --accent-strong-rgb: 219, 39, 119;
  --accent-pop-rgb: 251, 113, 133;     /* mercan ucu */
  --accent-bright-rgb: 244, 114, 182;
  --accent-cool-rgb: 168, 85, 247;     /* mor refakatçi */
}
[data-accent="kehribar"] {
  --accent-rgb: 245, 158, 11;          /* kehribar */
  --accent-strong-rgb: 217, 119, 6;
  --accent-pop-rgb: 251, 146, 60;      /* turuncu ucu */
  --accent-bright-rgb: 251, 191, 36;
  --accent-cool-rgb: 244, 63, 94;      /* gül refakatçi */
}
[data-accent="civit"] {
  --accent-rgb: 99, 102, 241;          /* çivit */
  --accent-strong-rgb: 79, 70, 229;
  --accent-pop-rgb: 139, 92, 246;      /* menekşe ucu */
  --accent-bright-rgb: 129, 140, 248;
  --accent-cool-rgb: 59, 130, 246;
}
[data-accent="gokyuzu"] {
  --accent-rgb: 14, 165, 233;          /* gökyüzü */
  --accent-strong-rgb: 2, 132, 199;
  --accent-pop-rgb: 34, 211, 238;      /* camgöbeği ucu */
  --accent-bright-rgb: 56, 189, 248;
  --accent-cool-rgb: 99, 102, 241;     /* çivit refakatçi */
}
[data-accent="cimen"] {
  --accent-rgb: 34, 197, 94;           /* çimen yeşili */
  --accent-strong-rgb: 22, 163, 74;
  --accent-pop-rgb: 163, 230, 53;      /* limon ucu */
  --accent-bright-rgb: 74, 222, 128;
  --accent-cool-rgb: 16, 185, 129;
}
[data-accent="turuncu"] {
  --accent-rgb: 249, 115, 22;          /* turuncu */
  --accent-strong-rgb: 234, 88, 12;
  --accent-pop-rgb: 251, 191, 36;      /* kehribar ucu */
  --accent-bright-rgb: 251, 146, 60;
  --accent-cool-rgb: 244, 63, 94;      /* gül refakatçi */
}
[data-accent="kizil"] {
  --accent-rgb: 239, 68, 68;           /* kızıl */
  --accent-strong-rgb: 220, 38, 38;
  --accent-pop-rgb: 251, 146, 60;      /* turuncu ucu */
  --accent-bright-rgb: 248, 113, 113;
  --accent-cool-rgb: 236, 72, 153;     /* pembe refakatçi */
}
[data-accent="fusya"] {
  --accent-rgb: 217, 70, 239;          /* fuşya */
  --accent-strong-rgb: 192, 38, 211;
  --accent-pop-rgb: 244, 114, 182;     /* pembe ucu */
  --accent-bright-rgb: 232, 121, 249;
  --accent-cool-rgb: 139, 92, 246;     /* menekşe refakatçi */
}