/* ════════════════════════════════════════════════════════════════
   NUMAP Design System v1.0
   - Tek noktadan renk, boşluk, radius, gölge, tipografi
   - Mevcut hardcoded değerleri yansıtır; ileride tek noktadan ayarlanır
   - Sadece TOKEN'lar; component sınıfları ayrı CSS dosyalarında
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marka Renkleri ── */
  --np-color-primary:        #7c3aed;  /* Mor (admin/aktif sekme) */
  --np-color-primary-hover:  #6d28d9;
  --np-color-primary-soft:   #f3eefe;  /* arka plan tonu */
  --np-color-primary-ring:   rgba(124,58,237,0.25);

  --np-color-accent:         #3b82f6;  /* Mavi (vurgu) */
  --np-color-accent-hover:   #2563eb;
  --np-color-accent-soft:    #eff6ff;

  --np-color-secondary:      #8b5cf6;  /* Mor (ikincil vurgu/raporlar) */
  --np-color-info:           #0ea5e9;  /* Cyan (bilgi) */

  /* ── Durum Renkleri ── */
  --np-color-success:        #10b981;
  --np-color-success-hover:  #059669;
  --np-color-success-soft:   #ecfdf5;

  --np-color-warning:        #f59e0b;
  --np-color-warning-soft:   #fffbeb;

  --np-color-danger:         #ef4444;
  --np-color-danger-hover:   #dc2626;
  --np-color-danger-soft:    #fef2f2;

  /* ── Tarafsız Tonlar (slate skala) ── */
  --np-color-text:           #1e293b;  /* primary text */
  --np-color-text-muted:     #475569;  /* body text */
  --np-color-text-subtle:    #64748b;  /* meta */
  --np-color-text-faint:     #94a3b8;  /* placeholder */

  --np-color-bg:             #ffffff;
  --np-color-bg-soft:        #f8fafc;  /* kart arka plan */
  --np-color-bg-muted:       #f1f5f9;  /* hover/disabled */

  --np-color-border:         #e2e8f0;
  --np-color-border-strong:  #cbd5e1;
  --np-color-border-focus:   var(--np-color-primary);

  /* ── Spacing skalası (4px tabanlı) ── */
  --np-space-1:  4px;
  --np-space-2:  8px;
  --np-space-3:  12px;
  --np-space-4:  16px;
  --np-space-5:  20px;
  --np-space-6:  24px;
  --np-space-8:  32px;
  --np-space-10: 40px;
  --np-space-12: 48px;
  --np-space-16: 64px;

  /* ── Border-radius (sade ölçek) ── */
  --np-radius-sm:   6px;   /* badge, tag */
  --np-radius-md:   8px;   /* buton, input */
  --np-radius-lg:   12px;  /* kart */
  --np-radius-xl:   16px;  /* modal */
  --np-radius-2xl:  20px;  /* büyük kart/feature */
  --np-radius-pill: 9999px;

  /* ── Gölgeler (3 derinlik) ── */
  --np-shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.05);
  --np-shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --np-shadow-lg: 0 12px 32px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);
  --np-shadow-xl: 0 24px 60px rgba(15,23,42,0.20), 0 8px 16px rgba(15,23,42,0.08);
  --np-shadow-focus: 0 0 0 3px var(--np-color-primary-ring);

  /* ── Tipografi (modüler skala) ── */
  --np-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --np-text-xs:    11px;   /* meta, badge */
  --np-text-sm:    12px;   /* form label, secondary */
  --np-text-base:  13px;   /* body */
  --np-text-md:    14px;   /* form input, primary body */
  --np-text-lg:    16px;   /* kart başlığı */
  --np-text-xl:    18px;   /* bölüm başlığı */
  --np-text-2xl:   22px;   /* sayfa başlığı */
  --np-text-3xl:   28px;   /* dashboard sayısı */

  --np-leading-tight:  1.2;
  --np-leading-snug:   1.4;
  --np-leading-normal: 1.55;
  --np-leading-relaxed:1.7;

  --np-weight-regular:  400;
  --np-weight-medium:   500;
  --np-weight-semibold: 600;
  --np-weight-bold:     700;
  --np-weight-extrabold:800;

  /* ── Geçiş süreleri ── */
  --np-transition-fast: 0.12s;
  --np-transition-base: 0.18s;
  --np-transition-slow: 0.3s;
  --np-easing:          cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index katmanları ── */
  --np-z-dropdown: 1000;
  --np-z-sticky:   1100;
  --np-z-overlay:  1900;
  --np-z-modal:    2000;
  --np-z-toast:    2100;

  /* ── Breakpoint'ler (referans için, JS tarafında okumak için) ── */
  --np-bp-sm: 640px;
  --np-bp-md: 768px;
  --np-bp-lg: 1024px;
  --np-bp-xl: 1280px;

  /* ── Backward-compat alias'lar (mevcut inline kodlar için) ── */
  --color-primary:    var(--np-color-primary);
  --color-accent:     var(--np-color-accent);
  --color-success:    var(--np-color-success);
  --color-danger:     var(--np-color-danger);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --np-transition-fast: 0.01ms;
    --np-transition-base: 0.01ms;
    --np-transition-slow: 0.01ms;
  }
}