/* Tasarım tokenleri: renk, gölge, radius, spacing */
:root {
  /* Renkler */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-border: #e7eaf0;
  --color-text: #1c2333;
  --color-text-muted: #6b7280;
  --color-text-faint: #9aa1b1;

  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #eaf1ff;

  --color-success: #16a34a;
  --color-success-bg: #eafaf0;
  --color-warning: #d97706;
  --color-warning-bg: #fef6e7;
  --color-danger: #dc2626;
  --color-danger-bg: #fdeceb;
  --color-info: #0891b2;
  --color-info-bg: #e7f8fb;

  /* Nötr yardımcı renkler (dark mode'da bunlar değişir) */
  --color-input-bg: #fbfcfe;
  --color-hover-bg: #fafbfd;
  --color-kanban-bg: #eef1f6;
  --color-count-bg: #ffffff;
  --color-badge-gray-bg: #eef0f4;
  --color-scrollbar-thumb: #d7dce5;
  --color-danger-bg-strong: #fadbd8;
  --color-login-gradient: linear-gradient(160deg, #eef2ff 0%, var(--color-bg) 55%);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Gölgeler */
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.05);
  --shadow-md: 0 6px 16px rgba(20, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 24, 40, 0.10);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Layout */
  --sidebar-width: 250px;
  --topbar-height: 64px;

  /* Geçiş */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* Koyu tema: aynı değişkenlerin karanlık karşılıkları */
:root[data-theme="dark"] {
  --color-bg: #0f1420;
  --color-surface: #161c2c;
  --color-border: #2a3245;
  --color-text: #e6e9f2;
  --color-text-muted: #9aa3b8;
  --color-text-faint: #6b7385;

  --color-primary: #3b82f6;
  --color-primary-dark: #60a5fa;
  --color-primary-light: #1c2b4a;

  --color-success: #4ade80;
  --color-success-bg: #113322;
  --color-warning: #fbbf24;
  --color-warning-bg: #3a2a0d;
  --color-danger: #f87171;
  --color-danger-bg: #3a1616;
  --color-info: #22d3ee;
  --color-info-bg: #0d3138;

  --color-input-bg: #1c2333;
  --color-hover-bg: #1b2233;
  --color-kanban-bg: #1a2032;
  --color-count-bg: #232b40;
  --color-badge-gray-bg: #232b40;
  --color-scrollbar-thumb: #333d54;
  --color-danger-bg-strong: #4a1f1f;
  --color-login-gradient: linear-gradient(160deg, #16203a 0%, var(--color-bg) 55%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
}