/*
 * NyxGen panel — tasarım token'ları (TEK kaynak).
 * 2026-09-13: "yumuşak kart" diline geçiş (bkz. README "Panel: yumuşak kart
 * tasarımı") — açık gri zemin üzerinde beyaz, büyük yarıçaplı, yumuşak
 * gölgeli YÜZEN kartlar; pill (999px) kontroller; ikon rayı + yüzen üst bar.
 * Yalnızca değişkenler; bileşen kuralı yok. content-studio.css bunları tüketir.
 *
 * Ölçekler (başka değer YOK):
 *   boşluk   4 / 8 / 12 / 16 / 24 / 32 / 48
 *   yarıçap  8 / 12 / 16 / 20 / 24 / 999 (pill)
 *   yazı     11 / 12 / 13 / 14 / 16 / 20 / 24 / 30
 *
 * KRİTİK: --cs-accent-* adları branding.js tarafından çalışma anında ezilir
 * (kiracı aksan rengi / beyaz etiket). Bu adları DEĞİŞTİRME.
 * Eski adlar (--cs-bg, --cs-text, --cs-sp-*, --cs-radius...) JS'in ürettiği
 * satır içi stillerde geçtiği için takma ad olarak korunur.
 */
:root {
  /* — Boşluk — */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 24px;
  --cs-space-6: 32px;
  --cs-space-7: 48px;

  /* — Yarıçap: küçük kontrol < giriş alanı < kart iç kutu < kart < büyük kart < pill — */
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --cs-radius-xl: 20px;
  --cs-radius-2xl: 24px;
  --cs-radius-pill: 999px;

  /* — Tipografi — */
  --cs-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cs-font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  --cs-text-xs: 11px;   /* rozet, tablo başlığı, ipucu */
  --cs-text-sm: 12px;   /* etiket, meta, ikincil metin */
  --cs-text-md: 13px;   /* gövde (varsayılan) */
  --cs-text-base: 14px; /* kart başlığı, vurgulu gövde */
  --cs-text-lg: 16px;   /* bölüm başlığı, modal başlığı */
  --cs-text-xl: 20px;   /* sayfa başlığı */
  --cs-text-2xl: 24px;  /* KPI değeri, karşılama */
  --cs-text-3xl: 30px;  /* pano başlığı (Genel Bakış) */
  --cs-leading-tight: 1.25;
  --cs-leading-normal: 1.5;
  --cs-weight-regular: 400;
  --cs-weight-medium: 500;
  --cs-weight-semibold: 600;

  /* — Yüzeyler: zemin (gri) < yüzey (beyaz kart) < yükseltilmiş (kart içi kutu) — */
  --cs-bg-base: #eceef3;
  --cs-bg-surface: #ffffff;
  --cs-bg-raised: #f3f4f8;
  --cs-bg-hover: #e8eaf0;

  /* — Kenarlık / ayırıcı (kartlar kenarlıksız; yalnız girişler/pill'ler) — */
  --cs-border-subtle: #e7e9ef;
  --cs-border-strong: #d5d9e2;

  /* — Mürekkep — */
  --cs-text-primary: #111827;
  --cs-text-secondary: #4b5565;
  --cs-text-muted: #6b7280;

  /* — Vurgu (tek renk, dört ton + soft) — */
  --cs-accent-400: #2457d8;
  --cs-accent-500: #3b82f6;
  --cs-accent-600: #2f6be6;
  --cs-accent-700: #2453c7;
  --cs-accent-soft: #e9f0ff;

  /* — Durum (vurgudan bağımsız, sabit) — */
  --cs-success: #15803d;
  --cs-success-soft: #e8f7ee;
  --cs-warning: #b45309;
  --cs-warning-soft: #fff4e0;
  --cs-danger: #b91c1c;
  --cs-danger-soft: #fdecec;
  --cs-info: #1d4ed8;
  --cs-info-soft: #e9f0ff;

  /* — Gölge: kart (yumuşak, geniş), pill (kısa), katman üstü (menü/çekmece/modal) — */
  --cs-shadow-raised: 0 1px 2px rgba(20, 24, 40, 0.04), 0 12px 32px -16px rgba(20, 24, 40, 0.16);
  --cs-shadow-pill: 0 1px 2px rgba(20, 24, 40, 0.05), 0 6px 16px -10px rgba(20, 24, 40, 0.18);
  --cs-shadow-overlay: 0 28px 60px -24px rgba(20, 24, 40, 0.35), 0 2px 8px rgba(20, 24, 40, 0.06);

  /* — Hareket — */
  --cs-transition: 160ms ease;

  /* — Yerleşim: yüzen ray + yüzen üst bar; içerik gri zeminde — */
  --cs-gutter: 14px;
  --cs-sidebar-w: 76px;
  --cs-sidebar-w-open: 244px;
  --cs-topbar-h: 64px;
  --cs-content-max: 1360px;
  --cs-content-max-wide: 1600px;
  --cs-control-h: 36px;
  --cs-control-h-sm: 30px;
  --cs-row-h: 40px;

  /* — Takvim / avatar / zaman çizelgesi renk paleti (kategori rengi, dekor değil) — */
  --cs-cal-blue: #3b82f6; --cs-cal-green: #22c55e; --cs-cal-purple: #8b5cf6; --cs-cal-orange: #f59e0b;
  --cs-cal-red: #ef4444; --cs-cal-gray: #6b7280; --cs-cal-pink: #ec4899; --cs-cal-teal: #14b8a6;
  --cs-cal-yellow: #eab308; --cs-cal-indigo: #6366f1;

  /* — Eski adlar (JS/HTML satır içi stilleri) — */
  --cs-sp-1: var(--cs-space-1);
  --cs-sp-2: var(--cs-space-2);
  --cs-sp-3: var(--cs-space-3);
  --cs-sp-4: var(--cs-space-4);
  --cs-sp-5: var(--cs-space-5);
  --cs-sp-6: var(--cs-space-6);
  --cs-sp-7: var(--cs-space-7);
  --cs-radius: var(--cs-radius-md);
  --cs-fs-display: var(--cs-text-xl);
  --cs-fs-heading: var(--cs-text-lg);
  --cs-fs-body: var(--cs-text-md);
  --cs-fs-caption: var(--cs-text-sm);
  --cs-transition-fast: var(--cs-transition);
  --cs-transition-base: var(--cs-transition);
  --cs-transition-spring: var(--cs-transition);
  --cs-ease-spring: ease;
  --cs-t: var(--cs-transition);
  --cs-bg: var(--cs-bg-base);
  --cs-bg-elevated: var(--cs-bg-surface);
  --cs-bg-input: var(--cs-bg-surface);
  --cs-border: var(--cs-border-subtle);
  --cs-text: var(--cs-text-primary);
  --cs-text-dim: var(--cs-text-secondary);
  --cs-text-faint: var(--cs-text-muted);
  --cs-accent: var(--cs-accent-500);
  --cs-accent-2: var(--cs-info);
  --cs-accent-gradient: var(--cs-accent-600);
  --cs-glass-bg: var(--cs-bg-surface);
  --cs-glass-border: var(--cs-border-subtle);
  --cs-blur: 0px;
  --cs-shadow-elevated: var(--cs-shadow-raised);
  --cs-shadow-glow: none;
}

/* ============================================================
   KOYU TEMA — <html data-theme="dark"> (js/theme.js; localStorage cs_theme:
   light | dark | system). Yalnız renk/gölge token'ları değişir; ölçüler,
   yarıçaplar ve vurgu (--cs-accent-*, branding.js ezer) aynı kalır.
   Yüzey sırası korunur: zemin (en koyu) < yüzey (kart) < yükseltilmiş (kart içi).
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cs-bg-base: #0f1117;
  --cs-bg-surface: #181b23;
  --cs-bg-raised: #21252f;
  --cs-bg-hover: #2a2f3b;

  --cs-border-subtle: #262b36;
  --cs-border-strong: #343a47;

  --cs-text-primary: #f1f3f7;
  --cs-text-secondary: #b6bcc9;
  --cs-text-muted: #8a91a0;

  --cs-accent-soft: rgba(59, 130, 246, 0.18);

  --cs-success: #4ade80;
  --cs-success-soft: rgba(34, 197, 94, 0.16);
  --cs-warning: #fbbf24;
  --cs-warning-soft: rgba(245, 158, 11, 0.16);
  --cs-danger: #f87171;
  --cs-danger-soft: rgba(239, 68, 68, 0.16);
  --cs-info: #93c5fd;
  --cs-info-soft: rgba(59, 130, 246, 0.18);

  --cs-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --cs-shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
  --cs-shadow-overlay: 0 28px 60px -24px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
}