/* 
  ROOT CSS - Design Tokens
  Proje Genel Renk, Font ve Şekil Değişkenleri
*/

:root {
  /* Renk Paleti - Ana Renkler (Black & Dark Charcoal) */
  --color-primary: #111111;        /* Koyu Kömür / Siyah */
  --color-primary-light: #222222;  /* Daha Açık Kömür (Hover) */
  --color-primary-dark: #000000;   /* Tam Siyah (Logo Arkaplanı İle Uyumlu) */
  
  /* Renk Paleti - Vurgu Renkleri (Premium Gold) */
  --color-accent: #D4AF37;         /* Premium Altın Sarısı */
  --color-accent-hover: #C5A059;   /* Koyu Altın Sarısı (Hover) */
  --color-accent-soft: #FFF8E1;    /* Açık altın yüzey */
  
  /* Renk Paleti - Arka Plan & Yüzeyler */
  --color-bg-body: #F3F4F6;        /* Açık Gri - Genel Arkaplan */
  --color-bg-surface: #FFFFFF;     /* Beyaz - Kartlar ve İçerik Yüzeyleri */
  --color-bg-surface-alt: #E5E7EB; /* Alternatif Gri Yüzey (Örn: Footer Üstü) */
  
  /* Renk Paleti - Metinler (Charcoal) */
  --color-text-main: #1F2937;      /* Koyu Kömür - Başlıklar ve Ana Metinler */
  --color-text-muted: #4B5563;     /* Yumuşak Kömür - Alt Başlıklar ve Açıklamalar */
  --color-text-light: #9CA3AF;     /* Açık Gri Metin (Footer içi vb.) */
  --color-text-white: #FFFFFF;     /* Beyaz Metin (Buton İçi, Koyu Yüzey Üzeri) */
  --color-text-soft: #6B7280;      /* Yumuşak gri yardımcı metin */
  --color-text-inverse-muted: #D1D5DB;
  --color-text-inverse-soft: #E5E7EB;
  
  /* Renk Paleti - Kenarlıklar */
  --color-border: #D1D5DB;         /* Standart Kenarlık Gri */
  --color-border-light: #E5E7EB;   /* Açık Kenarlık */
  --color-border-strong: #C7CDD4;  /* Güçlü kenarlık */

  /* Durum Renkleri */
  --color-success: #15803D;
  --color-success-hover: #166534;
  --color-success-soft: #DCFCE7;
  --color-warning: #92400E;
  --color-warning-soft: #FFFBEB;
  --color-overlay-strong: rgba(17, 17, 17, 0.78);
  --color-overlay-soft: rgba(17, 17, 17, 0.04);

  /* Tipografi - Font Aileleri */
  --font-family-heading: 'Montserrat', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  
  /* Tipografi - Font Boyutları */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-md: 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 */
  
  /* Şekil & Köşe Yuvarlamaları (Border Radius) */
  --radius-sm: 4px;            /* Küçük Yüzeyler (Badge vb.) */
  --radius-md: 8px;            /* Orta Yüzeyler (Görseller, Inputlar) */
  --radius-lg: 16px;           /* Geniş Yüzeyler (Ürün Kartları) */
  --radius-pill: 9999px;       /* Tam Yuvarlak (Pill) Şekli (Butonlar İçin) */
  
  /* Kesin Kısıtlama: Gölge Kullanımı Yasaktır (Flat Tasarım) */
  --box-shadow-none: none;
  
  /* Geçiş & Animasyon Süreleri */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  
  /* Boşluklar (Spacing - Padding & Margin) */
  --spacing-xs: 0.25rem;       /* 4px */
  --spacing-sm: 0.5rem;        /* 8px */
  --spacing-md: 1rem;          /* 16px */
  --spacing-lg: 1.5rem;        /* 24px */
  --spacing-xl: 2rem;          /* 32px */
  --spacing-2xl: 3rem;         /* 48px */
  --spacing-3xl: 5rem;         /* 80px */
}