/* ==========================================================================
   PUREPDF DESIGN TOKENS
   Tek gerçek kaynak (single source of truth): renk, tipografi, boşluk,
   radius, gölge, geçiş ve z-index değerleri. Bileşen/layout katmanları
   asla ham hex/px değeri kullanmaz; her zaman bu token'lara referans verir.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     1. RENK ÖLÇEKLERİ (Ham Paletler)
     -------------------------------------------------------------------- */

  /* Slate — nötr yüzeyler, metin, kenarlıklar, derin lacivert markalama */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Primary — marka mavisi (etkileşimli öğeler: buton, link, aktif durum) */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Emerald — güven veren ikincil vurgu (Drive, başarı durumları) */
  --emerald-50:  #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* Violet — bento ızgarasında üçüncü kategori vurgusu (ör. Split/Merge) */
  --violet-50:  #f5f3ff;
  --violet-100: #ede9fe;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  /* Amber — uyarı durumları */
  --amber-100: #fef3c7;
  --amber-500: #f59e0b;
  --amber-700: #b45309;

  /* Red — sadece yıkıcı eylemler (silme, hata) için ayrılmıştır */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* --------------------------------------------------------------------
     2. SEMANTİK RENK TOKEN'LARI
     Bileşenler bunları kullanır; ham ölçekleri değil. Marka güncellenirse
     sadece bu katman değişir.
     -------------------------------------------------------------------- */

  --color-bg-app:          var(--slate-50);
  --color-bg-surface:      #ffffff;
  --color-bg-surface-alt:  var(--slate-100);
  --color-bg-inverse:      var(--slate-900);
  --color-bg-overlay:      rgba(15, 23, 42, 0.55);

  --color-border:          var(--slate-200);
  --color-border-strong:   var(--slate-300);
  --color-border-inverse:  rgba(255, 255, 255, 0.14);

  --color-text-primary:    var(--slate-900);
  --color-text-secondary:  var(--slate-600);
  --color-text-muted:      var(--slate-500);
  --color-text-inverse:    #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.72);

  --color-brand:           var(--primary-600);
  --color-brand-hover:     var(--primary-700);
  --color-brand-active:    var(--primary-800);
  --color-brand-soft:      var(--primary-50);
  --color-brand-soft-hover: var(--primary-100);
  --color-on-brand:        #ffffff;

  --color-accent:          var(--emerald-500);
  --color-accent-hover:    var(--emerald-600);
  --color-accent-soft:     var(--emerald-50);
  --color-on-accent:       #ffffff;

  --color-danger:          var(--red-500);
  --color-danger-hover:    var(--red-600);
  --color-danger-soft:     var(--red-50);

  --color-warning:         var(--amber-500);
  --color-warning-soft:    var(--amber-100);
  --color-warning-text:    var(--amber-700);

  --color-focus-ring:      var(--primary-500);

  /* Marka gradyanları */
  --gradient-brand:      linear-gradient(135deg, var(--slate-900) 0%, var(--primary-700) 55%, var(--primary-600) 100%);
  --gradient-brand-soft: linear-gradient(160deg, var(--primary-50) 0%, #ffffff 60%);
  --gradient-feature:    radial-gradient(120% 130% at 100% 0%, rgba(59, 130, 246, 0.35) 0%, rgba(15, 23, 42, 0) 60%);

  /* --------------------------------------------------------------------
     3. TİPOGRAFİ
     -------------------------------------------------------------------- */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md:   1.0625rem; /* 17px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.375rem;  /* 22px */
  --fs-2xl:  1.75rem;   /* 28px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  2.75rem;   /* 44px */

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

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:  0.02em;

  /* --------------------------------------------------------------------
     4. BOŞLUK ÖLÇEĞİ (4px taban)
     -------------------------------------------------------------------- */

  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* --------------------------------------------------------------------
     5. RADIUS
     -------------------------------------------------------------------- */

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* --------------------------------------------------------------------
     6. GÖLGE (Lacivert tonlu, sıcak siyah yerine)
     -------------------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.20);

  --shadow-brand:  0 8px 20px rgba(37, 99, 235, 0.28);
  --shadow-accent: 0 8px 20px rgba(16, 185, 129, 0.28);
  --shadow-danger: 0 6px 16px rgba(239, 68, 68, 0.28);

  /* --------------------------------------------------------------------
     7. GEÇİŞ / EASING
     -------------------------------------------------------------------- */

  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 220ms var(--ease-standard);
  --transition-slow: 340ms var(--ease-emphasized);

  /* --------------------------------------------------------------------
     8. DÜZEN SABİTLERİ
     -------------------------------------------------------------------- */

  --header-height:   64px;
  --sidebar-width:   340px;
  --container-max:   1160px;
  --container-narrow: 800px;

  /* Referans kırılım noktaları (medya sorgularında literal olarak kullanılır,
     JS tarafında window.matchMedia ile senkron tutulmalıdır):
     --bp-sm: 600px   --bp-md: 768px   --bp-lg: 900px   --bp-xl: 1024px */

  /* --------------------------------------------------------------------
     9. Z-INDEX KATMANLARI
     -------------------------------------------------------------------- */

  --z-header:    100;
  --z-sticky:    200;
  --z-backdrop:  900;
  --z-sheet:     950;
  --z-modal:     1000;
  --z-toast:     1100;
}