/* ============================================================
   DESIGN TOKENS — Köy Su Fatura Sistemi
   Beyaz & Mavi Tema
   ============================================================ */

:root {
  /* ── Marka Renkleri (Mavi Palette) ── */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;
  --color-primary-950: #172554;

  /* ── Nötr (Slate) ── */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* ── Durum Renkleri ── */
  --color-success-50:  #ECFDF5;
  --color-success-100: #D1FAE5;
  --color-success-200: #A7F3D0;
  --color-success-500: #10B981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-200: #FDE68A;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;

  --color-danger-50:   #FEF2F2;
  --color-danger-100:  #FEE2E2;
  --color-danger-200:  #FECACA;
  --color-danger-300:  #FCA5A5;
  --color-danger-400:  #F87171;
  --color-danger-500:  #EF4444;
  --color-danger-600:  #DC2626;
  --color-danger-700:  #B91C1C;

  --color-info-50:     #ECFEFF;
  --color-info-100:    #CFFAFE;
  --color-info-200:    #A5F3FC;
  --color-info-500:    #06B6D4;
  --color-info-600:    #0891B2;

  /* ── Semantic Colors ── */
  /* --color-primary EKSIKTI: diger dordunun aksine tanimlanmamisti, ama
     components.css onu kullaniyordu. Tanimsiz custom property + fallback yok
     = ozellik "unset" olur; .swipe-actions-right arka plani mavi yerine
     SEFFAF render ediliyordu. */
  --color-primary: var(--color-primary-500);
  --color-success: var(--color-success-500);
  --color-warning: var(--color-warning-500);
  --color-danger:  var(--color-danger-500);
  --color-info:    var(--color-info-500);

  /* ── App Layout Colors ── */
  --bg-app:      #F0F6FF;        /* Uygulama arka planı */
  --bg-card:     #FFFFFF;        /* Kart arka planı */
  --bg-sidebar:  #1E3A8A;        /* Sidebar - Lacivert */
  --bg-header:   #FFFFFF;        /* Header */
  /* --bg-surface: kart/yuzey arka plani icin takma ad. Tanimsizdi ve
     .swipe-content onu fallback'siz kullaniyordu — kaydirilabilir liste
     satirinin ic katmani seffaf kaliyor, altindaki kirmizi eylem rengi
     metnin arkasindan siziyordu. */
  --bg-surface:  var(--bg-card);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-500);
  --text-muted:     var(--color-neutral-400);
  --text-sidebar:   #FFFFFF;
  --text-sidebar-muted: rgba(255, 255, 255, 0.6);

  --border-color:  var(--color-neutral-200);
  --border-focus:  var(--color-primary-500);

  /* ── Spacing ── */
  --space-0:   0;
  --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-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* ── Border Radius ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.30);

  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* ── Z-Index ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   150;
  --z-modal:    200;
  --z-toast:    300;
  --z-tooltip:  400;

  /* ── Layout ── */
  --sidebar-width:         260px;
  --sidebar-width-mini:    72px;
  --header-height:         64px;
  --content-max-width:     1400px;
  --content-padding:       var(--space-6);
}

/* ── Responsive Token Overrides ── */
@media (max-width: 768px) {
  :root {
    --content-padding: var(--space-4);
  }
}