/* ============================================
   Nomagri E-Ticaret - Design Variables
   Premium & Luxury Food E-Commerce
   ============================================ */

:root {
    /* ===== RENKLER ===== */
    
    /* Ana Marka Renkleri - Doğal Yeşil (Gıda & Tazelik) */
    --color-primary: #2D5F2D;          /* Orman Yeşili — Ana site rengi */
    --color-primary-light: #3E7B3E;    /* Açık Yeşil */
    --color-primary-dark: #1E4620;     /* Koyu Yeşil */
    
    /* İkincil Renkler - Doğal Toprak */
    --color-secondary: #5C4A28;        /* Koyu Toprak */
    --color-secondary-light: #8B7242;  /* Açık Toprak */
    --color-secondary-dark: #3D3019;   /* Çok Koyu Toprak */
    
    /* Marka Gold - PANTONE 7556 C (Premium Vurgular) */
    --color-gold: #9E7A38;             /* PANTONE 7556 C - Nomagri Gold */
    --color-gold-light: #B8944E;       /* Açık Gold */
    --color-gold-dark: #7A5E2B;        /* Koyu Gold */
    
    /* Aksan Renkler */
    --color-accent: #C4A265;           /* Parlak Gold Aksan */
    --color-accent-light: #D4B87D;     /* Açık Aksan */
    --color-accent-dark: #9E7A38;      /* Koyu Aksan = Gold */
    
    /* Nötr Renkler */
    --color-white: #fafaf8;            /* Nomagri Beyaz - Doğal ton */
    --color-pure-white: #ffffff;       /* Saf Beyaz (form inputlar vs.) */
    --color-black: #1a1a18;
    --color-cream: #f5f3ef;            /* Krem */
    --color-ivory: #ece9e4;            /* Fildişi */
    --color-stone: #ddd8d0;            /* Taş Gri */
    
    /* Gri Skalası - Doğal Tonlar */
    --color-gray-50: #f8f9f7;
    --color-gray-100: #f0f1ee;
    --color-gray-200: #e2e4de;
    --color-gray-300: #ced1c9;
    --color-gray-400: #9fa59a;
    --color-gray-500: #6b7266;
    --color-gray-600: #4d534a;
    --color-gray-700: #3a3f37;
    --color-gray-800: #262923;
    --color-gray-900: #1a1c18;
    
    /* Durum Renkleri */
    --color-success: #2d6a4f;
    --color-success-light: #d4edda;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-error: #991b1b;
    --color-error-light: #fee2e2;
    --color-info: #1e40af;
    --color-info-light: #dbeafe;
    
    /* Ürün Kategorisi Renkleri */
    --color-olive: #6b7d3e;            /* Zeytinyağı */
    --color-olive-dark: #4a5c28;       /* Koyu Zeytinyağı */
    --color-olive-light: #8a9a5a;      /* Açık Zeytinyağı */
    --color-pomegranate: #8b0000;      /* Nar Salçası */
    --color-hazelnut: #8b4513;         /* Fıstık/Fındık */
    --color-grain: #daa520;            /* Bakliyat */
    --color-gold: #9E7A38;             /* PANTONE 7556 C - Marka Gold */
    
    /* Metin Renkleri */
    --color-text-primary: #1a1c18;     /* Ana Metin - Doğal Koyu */
    --color-text-secondary: #4d534a;   /* İkincil Metin */
    
    /* ===== TİPOGRAFİ ===== */
    
    /* Font Aileleri - DM Sans */
    --font-primary: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;      /* Başlıklar */
    --font-secondary: 'Cormorant Garamond', 'Georgia', serif;  /* Alt Başlıklar - Zarif Serif */
    --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;         /* Gövde Metin */
    --font-accent: 'Cormorant Garamond', 'Georgia', serif;     /* Özel Vurgular */
    --font-heading: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;      /* Başlık (Alias) */
    --font-body-alt: 'Cormorant Garamond', 'Georgia', serif;   /* Alternatif Gövde */
    
    /* Font Ağırlıkları */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Font Boyutları */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */
    --font-size-7xl: 4.5rem;      /* 72px */
    
    /* Satır Yükseklikleri */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Harf Aralıkları */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* ===== 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 */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    
    /* ===== BOYUTLAR ===== */
    
    /* Container */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --container-max: 1600px;
    
    /* Header */
    --header-height: 80px;
    --header-height-mobile: 64px;
    
    /* ===== EFEKTLER ===== */
    
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;   /* 2px */
    --radius-base: 0.25rem;  /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* Shadows - Premium & Soft */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-base: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.06), 0 10px 10px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 35px 60px rgba(0, 0, 0, 0.12);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    
    /* Premium Green Shadow */
    --shadow-gold: 0 4px 20px rgba(45, 95, 45, 0.2);
    --shadow-gold-lg: 0 10px 40px rgba(45, 95, 45, 0.25);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms 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;
    
    /* ===== BORDERS ===== */
    --border-width: 1px;
    --border-color: var(--color-stone);
    --border-color-light: var(--color-gray-200);
    --border-color-dark: var(--color-gray-400);
}

/* ===== DARK MODE (Gelecek için hazırlık) ===== */
[data-theme="dark"] {
    --color-cream: #1a1a1a;
    --color-ivory: #242424;
    --color-stone: #2d2d2d;
    --color-white: #0a0a0a;
    --color-black: #fafafa;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
}