/* ============================================================
   variables.css — Tasarım token'ları
   Beyaz tema: beyaz ve açık gri zeminler, Willson kırmızısı vurgu,
   Outfit başlıklar, ince çizgili yuvarlak köşeli kartlar.
   Slider görsellerin üstünde olduğu için kendi sabit renklerini
   kullanır (hero.css).
   ============================================================ */

:root {
  /* --- Marka renkleri --- */
  --color-primary: #D60D18;          /* Willson kırmızısı (Site Ayarları > Görünüm ile değişir) */
  --color-primary-rgb: 214, 13, 24;  /* rgba() içinde saydamlık için aynı rengin bileşenleri */
  --color-primary-hover: #EC2A34;
  --color-primary-active: #B00A14;
  --color-accent: #D60D18;
  --color-accent-light: rgba(var(--color-primary-rgb), 0.12);
  --color-red-glow: rgba(var(--color-primary-rgb), 0.3);

  /* --- Zeminler --- */
  --color-bg: #FFFFFF;               /* sayfa zemini (beyaz) */
  --color-surface: #F6F6F7;          /* ayrık bölümler (açık gri) */
  --color-anthracite: #FFFFFF;       /* kart zemini */
  --color-anthracite-light: #D9D9DE; /* kenar çizgisi, çerçeveli buton */
  --color-field: #FFFFFF;            /* form alanları */
  --color-tile: #FFFFFF;             /* ürün fotoğrafı alanı (fotoğraflar beyaz zeminli) */

  /* --- Metin ve çizgiler --- */
  --color-ink: #111114;              /* başlıklar, vurgulu metin */
  --color-text: #45454C;             /* gövde metni */
  --color-muted: #6E6E76;            /* yardımcı metin */
  --color-line: rgba(17, 17, 20, 0.08);
  --color-line-strong: rgba(17, 17, 20, 0.14);
  --color-black: #111111;            /* açık zemin üstündeki koyu yazı */
  --color-inverse-fg: #FFFFFF;
  --color-error: #C62828;
  --color-success: #2E7D32;

  /* Kart zemini: düz beyaz (çerçeve ve gölge kartın kendisinde) */
  --card-bg: var(--color-anthracite);

  /* --- Sabit palet (admin paneli açık temadadır ve bunları kullanır) --- */
  --color-white: #FFFFFF;
  --color-dark: #111111;
  --color-gray-900: #111111;
  --color-gray-700: #2B2B2B;
  --color-gray-500: #6A6A66;
  --color-gray-400: #9A9893;
  --color-gray-300: #CFCCC5;
  --color-gray-200: #E4E2DD;
  --color-gray-100: #F5F4F1;
  --color-gray-50: #FAFAF8;
  --color-accent-blue: #1F5FAD;
  --color-accent-green: #2E7D32;

  /* --- Tipografi --- */
  --font-heading: var(--font-outfit), "Helvetica Neue", Arial, sans-serif;
  --font-family: var(--font-inter), "Helvetica Neue", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --font-size-hero: clamp(2.5rem, 5vw, 4rem);
  --font-size-h1: clamp(2rem, 4vw, 3rem);
  --font-size-h2: clamp(1.8rem, 3.5vw, 2.8rem);
  --font-size-h3: 1.125rem;
  --font-size-lead: 1.1rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-xs: 0.75rem;

  --line-height-tight: 1.15;
  --line-height-base: 1.7;
  --line-height-normal: 1.6;
  --line-height-loose: 1.8;

  /* --- Boşluklar --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* --- Köşeler --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* --- Gölgeler --- */
  --shadow-sm: 0 2px 8px rgba(17, 17, 20, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 17, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 17, 20, 0.10);
  --shadow-xl: 0 20px 48px rgba(17, 17, 20, 0.12);
  --shadow-red: 0 4px 24px rgba(var(--color-primary-rgb), 0.25);

  /* --- Geçişler --- */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Katmanlar --- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;

  /* --- Yerleşim --- */
  --header-height: 80px;
  --container-max: 1280px;
  --container-narrow: 800px;
  --container-wide: 1440px;
  --container-padding: 1.5rem;
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --container-padding: 1rem;
  }
}