/* ==========================================================================
   Design Tokens — tek kaynak. Light varsayılan, [data-theme="dark"] tam parite.
   Ölçekler: spacing 4/8/12/16/24/32/48 · radius 8/12/16/pill · font 12→36
   ========================================================================== */
:root {
  /* ---- Neutral ölçeği (slate) ---- */
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* ---- Brand ---- */
  --color-primary: #5B46F0;
  --color-primary-rgb: 91, 70, 240;
  --color-primary-hover: #4A35E5;
  --color-primary-press: #3E29D0;
  --color-primary-soft: rgba(91, 70, 240, .10);
  --color-secondary: #8B5CF6;
  --color-secondary-rgb: 139, 92, 246;
  --color-tertiary: #A78BFA;
  --color-accent: #06B6D4;
  --color-accent-rgb: 6, 182, 212;
  --color-on-primary: #FFFFFF;

  /* ---- Yüzeyler ---- */
  --color-bg: #F5F6FB;
  --color-bg-alt: #EEF0F8;
  --color-card: #FFFFFF;
  --color-surface-3: #F1F2FA;   /* disabled input, muted tablo başlığı */

  /* ---- Metin ---- */
  --color-text: var(--neutral-900);
  --color-text-3: var(--neutral-600);
  --color-text-soft: var(--neutral-500);
  --color-muted: var(--neutral-500);

  /* ---- Kenarlık ---- */
  --color-border: rgba(15, 23, 42, .10);
  --color-border-strong: rgba(15, 23, 42, .18);

  /* ---- Durum ---- */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, .12);
  --color-warning: #D97706;
  --color-warning-bg: rgba(245, 158, 11, .14);
  --color-danger: #EF4444;
  --color-danger-rgb: 239, 68, 68;
  --color-danger-bg: rgba(239, 68, 68, .10);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59, 130, 246, .10);

  /* ---- Gradient ---- */
  --gradient-accent: linear-gradient(135deg, #5B46F0 0%, #8B5CF6 100%);
  --gradient-cool: linear-gradient(135deg, #5B46F0 0%, #06B6D4 100%);
  --gradient-soft: linear-gradient(135deg, rgba(91,70,240,.10), rgba(167,139,250,.10));
  --gradient-mesh:
    radial-gradient(1000px 500px at 15% -10%, rgba(91,70,240,.14), transparent 55%),
    radial-gradient(900px 500px at 85% 110%, rgba(6,182,212,.10), transparent 55%);

  /* ---- Tipografi ---- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-ui: var(--font-body);
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.6;

  /* ---- Boşluk ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Gölge ---- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg: 0 16px 40px -12px rgba(15,23,42,.16), 0 4px 12px -4px rgba(15,23,42,.06);
  --shadow-xl: var(--shadow-lg);
  --shadow-glow: 0 8px 24px -8px rgba(var(--color-primary-rgb), .35);
  --shadow-ring: 0 0 0 3px rgba(var(--color-primary-rgb), .18);

  /* ---- Z-index katmanları ----
     pages/editor/admin hâlâ 1050–3500 arası sabit değerler kullandığı için
     modal/toast yüksek tutuldu; o dosyalar token'a geçince sıkıştırılır. */
  --z-sticky: 20;      /* sayfa içi sticky çubuklar */
  --z-dropdown: 50;    /* açılır menüler */
  --z-navbar: 100;     /* sabit navbar */
  --z-overlay: 1000;   /* tam ekran menü, cookie, banner */
  --z-modal: 5000;     /* ls-overlay ve modallar */
  --z-toast: 9000;     /* toast yığını */
  --z-top: 10000;      /* route progress */

  /* JS inline stillerinde kullanılan kısa aliaslar */
  --card-ls: var(--color-card);
  --border-ls: var(--color-border);

  /* ---- Layout ---- */
  --navbar-h: 64px;
  --tabbar-h: 68px;            /* mobil alt sekme çubuğu (safe-area hariç) */
  --container-max: 1200px;
  --gutter: 16px;
  --control-h: 44px;
  /* Modal / bottom-sheet maksimum yüksekliği: küçük ekranda dvh, klavye açıkken de iç scroll */
  --sheet-max-h: min(92vh, calc(100dvh - 24px));

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .15s;
  --dur: .22s;
  --dur-slow: .4s;

  /* ---- Glass (navbar/menü) ---- */
  --glass-bg: rgba(255,255,255,.80);
  --glass-border: rgba(15,23,42,.08);
  --glass-blur: 14px;
}

[data-theme="dark"] {
  --neutral-50:  #0A0C1D;
  --neutral-100: #101226;
  --neutral-200: #141731;
  --neutral-300: #232647;
  --neutral-400: #6B7089;
  --neutral-500: #8E93AE;
  --neutral-600: #B7BAD1;
  --neutral-700: #CDD0E3;
  --neutral-800: #DDDFEE;
  --neutral-900: #F4F5FB;

  --color-primary: #8B7CFF;
  --color-primary-rgb: 139, 124, 255;
  --color-primary-hover: #9E92FF;
  --color-primary-press: #7A6BFF;
  --color-primary-soft: rgba(139, 124, 255, .16);
  --color-secondary: #B5A6FF;
  --color-secondary-rgb: 181, 166, 255;
  --color-tertiary: #C4B5FD;
  --color-accent: #22D3EE;
  --color-accent-rgb: 34, 211, 238;
  --color-on-primary: #FFFFFF;

  --color-bg: #0A0C1D;
  --color-bg-alt: #0D0F22;
  --color-card: #141731;
  --color-surface-3: #1A1D3A;

  --color-text: var(--neutral-900);
  --color-text-3: var(--neutral-600);
  --color-text-soft: var(--neutral-500);
  --color-muted: var(--neutral-500);

  --color-border: rgba(255, 255, 255, .10);
  --color-border-strong: rgba(255, 255, 255, .20);

  --color-success: #34D399;
  --color-success-bg: rgba(52, 211, 153, .14);
  --color-warning: #FBBF24;
  --color-warning-bg: rgba(251, 191, 36, .14);
  --color-danger: #F87171;
  --color-danger-rgb: 248, 113, 113;
  --color-danger-bg: rgba(248, 113, 113, .14);
  --color-info: #60A5FA;
  --color-info-bg: rgba(96, 165, 250, .14);

  --gradient-accent: linear-gradient(135deg, #8B7CFF 0%, #B5A6FF 100%);
  --gradient-cool: linear-gradient(135deg, #8B7CFF 0%, #22D3EE 100%);
  --gradient-soft: linear-gradient(135deg, rgba(139,124,255,.18), rgba(196,181,253,.10));
  --gradient-mesh:
    radial-gradient(1100px 500px at 15% -10%, rgba(139,124,255,.22), transparent 55%),
    radial-gradient(900px 500px at 85% 110%, rgba(34,211,238,.12), transparent 55%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,.40), 0 2px 4px -2px rgba(0,0,0,.30);
  --shadow-lg: 0 16px 40px -12px rgba(0,0,0,.55), 0 4px 12px -4px rgba(0,0,0,.35);
  --shadow-xl: var(--shadow-lg);
  --shadow-glow: 0 8px 24px -8px rgba(139,124,255,.40);
  --shadow-ring: 0 0 0 3px rgba(139,124,255,.26);

  --glass-bg: rgba(16,18,38,.82);
  --glass-border: rgba(255,255,255,.08);
}