/**
 * BARBIE CNC - Tasarım Sistemi Değişkenleri (variables.css)
 * Üst Segment Endüstriyel Mühendislik Tasarım Dili
 */

:root {
  /* ====================================================
     BARBIE CNC - 3. AŞAMA: PREMİUM PEMBE ENDÜSTRİYEL MARKA KİMLİĞİ
     (Premium Industrial Pink + Dark Graphite + Metallic Details)
  ==================================================== */

  /* Ana Zeminler - Derin Grafit & Füme Antrasit */
  --bg-primary: #101116;          /* Ana koyu grafit zemin */
  --bg-surface-1: #161821;        /* Birinci kademe koyu yüzey */
  --bg-surface-2: #1C1E2A;        /* İkinci kademe kart/panel yüzeyi */
  --bg-surface-3: #242736;        /* Vurgulu yüzey / Hover yüzeyi */
  --bg-elevated: #2C3043;         /* Yükseltilmiş elemanlar */

  /* Açık / Kontrast Yüzeyler */
  --bg-light: #FAF8FA;            /* Kırık beyaz endüstriyel açık zemin */
  --bg-light-surface: #F5EEF3;    /* Çok hafif soft gül kurusu açık yüzey */
  --bg-soft-rose: #FDF2F7;        /* Zarif açık pembe kontrast zemin */
  --text-dark: #101116;           /* Açık zemin koyu grafit metin */
  --text-dark-muted: #555768;     /* Açık zemin ikincil metin */

  /* Metin Renkleri */
  --text-primary: #FFFFFF;        /* Yüksek kontrastlı ana metin */
  --text-secondary: #CBD0DB;      /* İkincil okuma metni */
  --text-muted: #8F94A6;          /* Düşük kontrastlı teknik açıklamalar */
  --text-dim: #5E6375;            /* Kılavuz çizgisi ve mikro metinler */
  --text-metallic: #A8A9B0;       /* Metalik gri teknik açıklamalar */

  /* Vurgu Renkleri - Premium Endüstriyel Pembe & Gül Kurusu */
  --accent-pink: #E94B91;         /* Ana Premium Pembe */
  --accent-pink-bright: #FF3D9A;  /* Canlı Vurgu Pembesi */
  --accent-pink-hover: #D83B80;   /* Hover pembesi */
  --accent-rose: #F27BAE;         /* Rose pink yüksek teknoloji parıltısı */
  --accent-deep-rose: #B92E69;    /* Koyu gül kurusu */
  --accent-soft-rose: #FCE8F1;    /* Soft rose rozet/vurgu */
  --accent-pink-glow: rgba(233, 75, 145, 0.42);
  --accent-pink-subtle: rgba(233, 75, 145, 0.16);

  /* Geriye Dönük Uyumluluk Eşlemeleri (Sistemin kusursuz çalışması için) */
  --accent-blue: var(--accent-pink);
  --accent-cyan: var(--accent-rose);
  --accent-blue-hover: var(--accent-pink-hover);
  --accent-glow: var(--accent-pink-glow);
  --accent-subtle: var(--accent-pink-subtle);

  /* İkincil Vurgu - Talaşlı İmalat / Metalik Uyarı Turuncusu */
  --accent-amber: #FF6B00;
  --accent-amber-subtle: rgba(255, 107, 0, 0.12);

  /* Çizgi, Kenarlık ve Izgara (Pembe Vurgulu Endüstriyel Çizgiler) */
  --border-subtle: rgba(233, 75, 145, 0.14);
  --border-medium: rgba(233, 75, 145, 0.28);
  --border-accent: rgba(233, 75, 145, 0.50);
  --border-accent-strong: #E94B91;
  --border-light: #E8DDE4;

  /* Tipografi */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Tipografik Ölçek */
  --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 */
  --text-6xl: 3.75rem;
  /* 60px */
  --text-7xl: 4.5rem;
  /* 72px */

  /* Boşluklar (Spacing - Geniş ve Ferah Bölüm Aralıkları) */
  --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-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-11: 2.75rem;  /* 44px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.75rem;  /* 60px */
  --space-16: 4.25rem;  /* 68px */
  --space-18: 4.75rem;  /* 76px */
  --space-20: 5.5rem;   /* 88px */
  --space-22: 6.25rem;  /* 100px */
  --space-24: 7rem;     /* 112px */
  --space-28: 8rem;     /* 128px */
  --space-32: 9rem;     /* 144px */
  --space-36: 10rem;    /* 160px */
  --space-40: 11rem;    /* 176px */

  /* Konteyner Genişlikleri (Masaüstü daha geniş ve ferah) */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1380px;
  --container-2xl: 1480px;

  /* Köşe Yuvarlama (Mühendislik odaklı keskin & minimalist) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Gölgeler ve Derinlik */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 24px rgba(233, 75, 145, 0.35);

  /* Geçişler (Transitions) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Katmanlar (Z-Index) */
  --z-negative: -1;
  --z-normal: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}