/**
 * CSS Variables - TalkTo Platform
 * Sage Green & Warm Beige Design System
 * Modern, Calm & Professional
 */

:root {
   /* ========================================
     ANA RENKLER - SAGE GREEN
     ======================================== */

   /* Primary - Sage Green */
   --primary-50: #f0f5f4;
   --primary-100: #dce8e6;
   --primary-200: #c3d9d5;
   --primary-300: #a3c5bf;
   --primary-400: #7FA8A0;
   --primary-500: #7FA8A0;
   --primary-600: #5F8F86;
   --primary-700: #4d7a72;
   --primary-800: #3f635d;
   --primary-900: #35524d;

   /* Secondary - Warm Caramel/Brown */
   --secondary-50: #faf6f2;
   --secondary-100: #f2e8de;
   --secondary-200: #e6d4c4;
   --secondary-300: #CFAE93;
   --secondary-400: #c49d7e;
   --secondary-500: #b08968;
   --secondary-600: #9a7356;
   --secondary-700: #7f5d46;
   --secondary-800: #684c3b;
   --secondary-900: #553e31;

   /* Accent - Soft Terracotta (sıcak, davetkar) */
   --accent-50: #FDF8F5;
   --accent-100: #F9EDE6;
   --accent-200: #F0D9CC;
   --accent-300: #E5C4AD;
   --accent-400: #D4A574;
   --accent-500: #C4915E;
   --accent-600: #A8764A;
   --accent-700: #8C5F3A;
   --accent-light: #FDF8F5;
   --accent-medium: #D4A574;
   --accent-dark: #A8764A;

   /* ========================================
     NÖTR RENKLER
     ======================================== */
   --gray-50: #F4F0E8;
   --gray-100: #EEF3F1;
   --gray-200: #e4e6e5;
   --gray-300: #d1d4d3;
   --gray-400: #a8adab;
   --gray-500: #6B6F72;
   --gray-600: #5c6163;
   --gray-700: #454a4c;
   --gray-800: #2F3A3D;
   --gray-900: #1a2224;

   /* ========================================
     DURUM RENKLERİ
     ======================================== */
   --success-light: #d1fae5;
   --success: #10b981;
   --success-dark: #059669;

   --warning-light: #fef3c7;
   --warning: #f59e0b;
   --warning-dark: #d97706;

   --error-light: #fee2e2;
   --error: #ef4444;
   --error-dark: #dc2626;

   --info-light: #dbeafe;
   --info: #3b82f6;
   --info-dark: #2563eb;

   /* ========================================
     ARKA PLAN RENKLERİ
     Kırık beyazdan kahverengiye yumuşak geçiş
     ======================================== */
   --bg-primary: #FDFBF7;
   /* Çok hafif krem - neredeyse beyaz */
   --bg-secondary: #F8F4ED;
   /* Hafif bej - sıcak kırık beyaz */
   --bg-tertiary: #F2EDE5;
   /* Açık bej - biraz daha sıcak */
   --bg-dark: #2F3A3D;
   --bg-darker: #1a2224;
   --bg-banner: #CFAE93;
   /* Kahverengi banner */
   --bg-soft: #F5F0E8;
   /* Yumuşak bej */

   /* Glassmorphism */
   --glass-bg: rgba(255, 255, 255, 0.8);
   --glass-border: rgba(127, 168, 160, 0.2);
   --glass-shadow: rgba(127, 168, 160, 0.1);

   /* ========================================
     METİN RENKLERİ
     ======================================== */
   --text-primary: #2F3A3D;
   --text-secondary: #6B6F72;
   --text-tertiary: #8a8e91;
   --text-inverse: #ffffff;
   --text-link: #5F8F86;
   --text-link-hover: #4d7a72;

   /* ========================================
     KENAR RENKLERİ
     ======================================== */
   --border-light: #e4e6e5;
   --border-medium: #d1d4d3;
   --border-dark: #a8adab;
   --border-primary: #7FA8A0;

   /* ========================================
     GÖLGELER
     ======================================== */
   --shadow-xs: 0 1px 2px rgba(47, 58, 61, 0.04);
   --shadow-sm: 0 1px 3px rgba(47, 58, 61, 0.06), 0 1px 2px rgba(47, 58, 61, 0.04);
   --shadow-md: 0 4px 6px rgba(47, 58, 61, 0.07), 0 2px 4px rgba(47, 58, 61, 0.05);
   --shadow-lg: 0 10px 15px rgba(47, 58, 61, 0.08), 0 4px 6px rgba(47, 58, 61, 0.04);
   --shadow-xl: 0 20px 25px rgba(47, 58, 61, 0.1), 0 10px 10px rgba(47, 58, 61, 0.04);
   --shadow-2xl: 0 25px 50px rgba(47, 58, 61, 0.15);

   /* Renkli gölgeler */
   --shadow-primary: 0 4px 14px rgba(127, 168, 160, 0.3);
   --shadow-primary-lg: 0 10px 25px rgba(127, 168, 160, 0.4);

   /* ========================================
     BORDER RADIUS
     ======================================== */
   --radius-sm: 0.375rem;
   /* 6px */
   --radius-md: 0.5rem;
   /* 8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* ========================================
     TİPOGRAFİ
     ======================================== */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-display: 'Outfit', var(--font-primary);

   /* Font sizes */
   --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 */
   --text-5xl: 3rem;
   /* 48px */

   /* Line heights */
   --leading-none: 1;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
   --leading-normal: 1.5;
   --leading-relaxed: 1.625;

   /* Font weights */
   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* ========================================
     SPACING
     ======================================== */
   --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 */

   /* ========================================
     GEÇİŞLER
     ======================================== */
   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;
   --transition-slower: 500ms ease;

   /* ========================================
     Z-INDEX
     ======================================== */
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-fixed: 300;
   --z-modal-backdrop: 400;
   --z-modal: 500;
   --z-popover: 600;
   --z-tooltip: 700;
   --z-toast: 800;

   /* ========================================
     GRADIENTLER
     ======================================== */
   --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
   --gradient-primary-soft: linear-gradient(135deg, var(--primary-100) 0%, var(--bg-soft) 100%);
   --gradient-hero: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
   --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
   --gradient-warm: linear-gradient(135deg, var(--secondary-300) 0%, var(--secondary-500) 100%);
   --gradient-mixed: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-400) 100%);

   /* ========================================
     CONTAINER
     ======================================== */
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1280px;
   --container-2xl: 1536px;
}

/* Dark mode hazırlığı */
@media (prefers-color-scheme: dark) {
   :root.auto-dark {
      --bg-primary: #1a2224;
      --bg-secondary: #2F3A3D;
      --bg-tertiary: #454a4c;
      --text-primary: #F4F0E8;
      --text-secondary: #d1d4d3;
      --text-tertiary: #a8adab;
      --border-light: #454a4c;
      --border-medium: #5c6163;
      --glass-bg: rgba(47, 58, 61, 0.8);
   }
}