/*
 * NoctraTV — tasarım jetonları (v2)
 *
 * TEK KAYNAK. Portal ve yönetici paneli buradan besleniyor; ergonomileri
 * ayrışıyor, dilleri ayrışmıyor.
 *
 * ————— Neden semantik ad —————
 *
 * Eskiden `--panel`, `--surface`, `--raise` vardı ve hangisinin neyin
 * üstünde durduğu adından anlaşılmıyordu. Yeni adlar katmanı söylüyor:
 * canvas → surface-1 → surface-2 → elevated. Bir bileşen yazarken
 * "bunun altında ne var" sorusunun cevabı adında.
 *
 * ————— Renk sözleşmesi (v1 spec A1) —————
 *
 * Mavi   = seçim ve birincil eylem
 * Altın  = premium ve mevcut olan
 * Yeşil  = etkin / başarı
 * Kırmızı= tehlike
 *
 * Bunun dışında renk YOK. Her şey öne çıkarsa hiçbir şey öne çıkmıyor.
 * Değerler v1'den birebir alındı — karakter değişmedi, adlandırma değişti.
 */

:root {
  /* ————— Zemin katmanları ————— */
  --bg-canvas: #030509;
  --bg-surface-1: #0a0e16;
  --bg-surface-2: #121828;
  --bg-elevated: #131a28;
  --bg-sunken: rgba(3, 5, 9, 0.6);

  /*
   * Sayfa zeminindeki iki ışıma. Dekor değil: göz üst-sağdan başlayıp
   * içeriğe iniyor. Tek yerde tanımlı, tek yerde değişir.
   */
  --canvas-glow:
    radial-gradient(900px 480px at 85% -10%, rgba(59, 130, 246, 0.1), transparent 70%),
    radial-gradient(700px 400px at -10% 100%, rgba(232, 193, 90, 0.045), transparent 70%);

  /* ————— Çizgi ————— */
  --border-subtle: #1b2333;
  --border-strong: #202a3c;
  --border-ghost: #2a3549;

  /* ————— Metin ————— */
  --text-primary: #edf1f8;
  --text-secondary: #97a2b5;
  --text-muted: #5c6678;
  --text-faintest: #39445a;

  /* ————— Anlam ————— */
  --action-primary: #3b82f6;
  --action-primary-deep: #1d4ed8;
  --action-primary-ink: #4d90f8;
  --action-wash: rgba(59, 130, 246, 0.12);
  --action-line: rgba(59, 130, 246, 0.35);

  --premium: #e8c15a;
  --premium-light: #f2d585;
  --premium-deep: #b8892e;
  --premium-wash: rgba(232, 193, 90, 0.12);
  --premium-line: rgba(232, 193, 90, 0.35);
  --on-premium: #04110b;

  --success: #3ddc97;
  --success-deep: #0fa26e;
  --success-wash: rgba(61, 220, 151, 0.12);
  --success-line: rgba(61, 220, 151, 0.35);
  --on-success: #04110b;

  --warning: #e8c15a;
  --warning-wash: rgba(232, 193, 90, 0.12);
  --warning-line: rgba(232, 193, 90, 0.35);

  --danger: #e5484d;
  --danger-deep: #b91c1c;
  --danger-wash: rgba(229, 72, 77, 0.1);
  --danger-line: rgba(229, 72, 77, 0.35);

  /* ————— Yazı ————— */
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ————— Boşluk: 4 tabanlı, ara değer üretilmez ————— */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;

  /* ————— Köşe ————— */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ————— Gölge ve parlama —————
   *
   * Parlama bir VURGUDUR, dekor değil. Yalnız birincil eylem ve odak
   * halkası kullanır. Gölge yalnız yüzen katmanda (menü, modal, çekmece).
   */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
  --glow-action: 0 8px 24px -10px var(--action-line);

  /*
   * Premium konik çerçeve — v1 spec A4.1.
   * SAYFA BAŞINA BİR KEZ. İkinci kullanım hiyerarşiyi öldürür.
   */
  --premium-ring: conic-gradient(
    from 210deg,
    rgba(232, 193, 90, 0.9),
    rgba(59, 130, 246, 0.55) 35%,
    rgba(232, 193, 90, 0.12) 62%,
    rgba(232, 193, 90, 0.9)
  );
  --premium-surface: linear-gradient(165deg, #121828, #0a0e16 60%, #080b12);

  /* ————— Odak ————— */
  /* ————— Örtü ve tint —————
     Perde, yapışkan çubuk ve ilerleme yuvası gibi YARI SAYDAM yüzeyler.
     Bunlar bir zamanlar `rgba(3, 5, 9, …)` diye ELLE yazılmıştı: aydınlık
     temada koyu kalıp ekranı ikiye bölüyorlardı. */
  --scrim-strong: rgba(3, 5, 9, 0.78);
  --scrim: rgba(2, 4, 9, 0.7);
  --scrim-soft: rgba(3, 5, 9, 0.5);
  --scrim-faint: rgba(3, 5, 9, 0.35);
  --tint-soft: rgba(237, 241, 248, 0.05);
  --shadow-hero: 0 24px 60px -28px rgba(0, 0, 0, 0.7);

  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--action-primary);

  /* ————— Hareket ————— */
  --fast: 120ms;
  --base: 180ms;
  --slow: 260ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ————— Ölçü ————— */
  --container: 1320px;
  --sidebar: 248px;
  --topbar: 56px;
}

/*
 * ═══════════════════════════════════════════════════════════════════
 * AYDINLIK TEMA
 * ═══════════════════════════════════════════════════════════════════
 *
 * ————— Neden gerekliydi —————
 *
 * Bu katman koyu-tek doğmuştu: `:root` içinde tek bir palet vardı ve
 * `[data-theme="light"]` hiç tanımlanmamıştı. Oysa hem portal hem
 * yönetici paneli tema değiştirici taşıyor (`/tema/light`) ve ESKİ
 * katman (`account.css`, `partials/head.ejs`) aydınlık paletini doğru
 * çeviriyordu.
 *
 * Sonuç ölçüldü: aydınlık seçildiğinde eski jetonlar dönüyor
 * (`--bg: #f3f4f8`, `--text: #15181f`) ama yenileri koyu kalıyordu
 * (`--bg-canvas: #030509`, `--text-primary: #edf1f8`). Yani:
 *
 *   - `nx-` ekranları anahtarı hiç dinlemiyordu — panel aydınlıkta da
 *     koyu kalıyordu, düğme çalışmıyor gibi görünüyordu;
 *   - eski katmandan kalan parçalar (`.savebar`, `.tab`, `.dnd-item`,
 *     `.people`, `.modal` ve taşınmamış portal ekranları) aydınlığa
 *     dönüyordu — aynı ekranda aydınlık yüzeyle koyu yüzey yan yana
 *     geliyor, metin okunamıyordu.
 *
 * ————— Değerler nereden geldi —————
 *
 * Yeni palet UYDURULMADI. Her değer `account.css` içindeki ONAYLI
 * `:root[data-theme="light"]` bloğundan alındı; yalnız adlar yeni
 * semantik karşılıklarına eşlendi (`--panel` → `--bg-surface-1` gibi).
 * Marka sözleşmesi değişmedi: mavi = eylem, altın = premium,
 * yeşil = etkin, kırmızı = tehlike.
 *
 * Karşılığı olmayan üç değer için kural: koyu temadaki ilişki korunarak
 * aydınlık zemine göre türetildi (aşağıda tek tek işaretli).
 *
 * ————— Kural —————
 *
 * Burada YALNIZ jeton yeniden tanımlanır. Hiçbir bileşen
 * `[data-theme]` seçicisi yazmaz; bileşenler jetonu okur, tema jetonu
 * değiştirir. Bir bileşen doğrudan renk yazarsa iki temadan birinde
 * kırılır — kırılan taraf çoğu zaman fark edilmez.
 */
:root[data-theme="light"] {
  /* ————— Zemin ————— */
  --bg-canvas: #f4f6fb;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f7f9fd;
  --bg-elevated: #ffffff;
  --bg-sunken: rgba(15, 23, 42, 0.04);
  --canvas-glow:
    radial-gradient(900px 480px at 85% -10%, rgba(59, 130, 246, 0.07), transparent 70%),
    radial-gradient(700px 400px at -10% 100%, rgba(168, 122, 22, 0.04), transparent 70%);

  /* ————— Çizgi ————— */
  --border-subtle: #e7ecf5;
  --border-strong: #dee4ef;
  --border-ghost: #cbd4e4;

  /* ————— Metin ————— */
  --text-primary: #0c1220;
  --text-secondary: #4a5568;
  --text-muted: #6b7488;
  --text-faintest: #94a0b5;

  /*
   * ————— Eylem —————
   *
   * Mavi marka rengidir, iki temada da aynı ailedendir. Aydınlıkta
   * BEYAZ zemine oturduğu için bir tık koyulaşıyor: #3b82f6 beyaz
   * üstünde metin olarak kontrast eşiğini geçmiyor.
   */
  --action-primary: #2563eb;
  --action-primary-deep: #1d4ed8;
  --action-primary-ink: #1d4ed8;
  --action-wash: rgba(59, 130, 246, 0.1);
  --action-line: rgba(59, 130, 246, 0.4);

  /* ————— Premium (altın) ————— */
  --premium: #a87a16;
  --premium-light: #c9a03a;
  --premium-deep: #7a5710;
  --premium-wash: rgba(168, 122, 22, 0.12);
  --premium-line: rgba(168, 122, 22, 0.4);
  /* TÜRETİLDİ: koyu temada altın üstü koyu metin; aydınlıkta altın
     koyulaştığı için üstü beyaza döndü. */
  --on-premium: #ffffff;

  /* ————— Etkin / başarı ————— */
  --success: #0fa26e;
  /* TÜRETİLDİ: koyu temadaki `--success-deep` ilişkisi korunarak
     aydınlık zemine göre bir kademe koyulaştırıldı. */
  --success-deep: #0b7f56;
  --success-wash: rgba(15, 162, 110, 0.12);
  --success-line: rgba(15, 162, 110, 0.4);
  --on-success: #ffffff;

  /* ————— Uyarı ————— */
  --warning: #a87a16;
  --warning-wash: rgba(168, 122, 22, 0.12);
  --warning-line: rgba(168, 122, 22, 0.4);

  /* ————— Tehlike ————— */
  --danger: #c0272d;
  /* TÜRETİLDİ: aydınlık zeminde bir kademe koyu. */
  --danger-deep: #9b1f24;
  --danger-wash: rgba(192, 39, 45, 0.1);
  --danger-line: rgba(192, 39, 45, 0.4);

  /* ————— Yükseklik ————— */
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06);
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 10px 30px -14px rgba(20, 24, 40, 0.16);
  --shadow-pop: 0 2px 6px rgba(20, 24, 40, 0.08), 0 18px 44px -18px rgba(20, 24, 40, 0.24);
  --glow-action: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 8px 24px -12px rgba(37, 99, 235, 0.45);

  --premium-ring: conic-gradient(
    from 210deg,
    rgba(168, 122, 22, 0.55),
    rgba(59, 130, 246, 0.4) 35%,
    rgba(168, 122, 22, 0.1) 62%,
    rgba(168, 122, 22, 0.55)
  );
  --scrim-strong: rgba(244, 246, 251, 0.85);
  --scrim: rgba(20, 24, 40, 0.45);
  --scrim-soft: rgba(15, 23, 42, 0.08);
  --scrim-faint: rgba(15, 23, 42, 0.04);
  --tint-soft: rgba(15, 23, 42, 0.05);
  --shadow-hero: 0 24px 60px -28px rgba(20, 24, 40, 0.3);

  --premium-surface: linear-gradient(165deg, #ffffff, #f7f9fd 60%, #f2f5fb);
}