/*
 * Değirmencioğlu — Design Tokens
 * Modern B2B/B2C ambalaj & endüstriyel konsept için tek kaynak tasarım değişkenleri.
 * Referans: yakutsanambalaj.com.tr
 *
 * Bu dosya, eski temanın (style.css) :root değişkenlerini yeni paletle hizalamak için
 * onun ARDINDAN yüklenir; böylece --color-primary, --font-primary gibi ortak
 * değişkenler sitenin tamamında yeni tasarım sistemine döner.
 */

:root {
  /* --- Renk Paleti --- */
  --color-primary: #00B395;
  --color-primary-hover: #00967D;
  --color-primary-dark: #007A65;
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, #fff);
  --color-primary-soft-strong: color-mix(in srgb, var(--color-primary) 18%, #fff);
  --color-on-primary: #FFFFFF;

  --color-dark: #1E293B;
  --color-text: #1E293B;
  --color-text-muted: #64748B;
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-border: #E2E8F0;

  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #0284C7;

  /* Eski Ekomart temasının değişkenlerini yeni palete hizala */
  --color-heading-1: var(--color-dark);
  --color-body: var(--color-text-muted);
  --font-primary: var(--font-sans);
  --font-secondary: var(--font-sans);

  /* --- Tipografi --- */
  --font-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* --- Boşluk Skalası --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Köşe Yuvarlama --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Gölgeler --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, .06), 0 1px 1px 0 rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, .10), 0 2px 8px -2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 40px -8px rgba(15, 23, 42, .16), 0 8px 16px -4px rgba(15, 23, 42, .08);

  /* --- Geçişler --- */
  --transition-fast: .15s ease;
  --transition-base: .25s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: .4s cubic-bezier(.4, 0, .2, 1);

  /* --- Header Ölçüleri --- */
  --header-topbar-h: 38px;
  --header-main-h: 84px;
  --header-nav-h: 78px;
  --mobile-bottombar-h: 64px;

  /* --- Sayfa genişliği (kenar boşlukları tutarlı olsun) --- */
  --layout-max: 1320px;
  --layout-gutter: 24px;

  /* --- Katman Sırası --- */
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-overlay: 1150;
  --z-drawer: 1200;
  --z-toast: 1300;
}

/* Tema .container (1696px) ile header/hero (1320px) farklıydı; tek ölçüye çek */
.container,
.container-2,
.container-3 {
  width: 100%;
  max-width: var(--layout-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  box-sizing: border-box;
}

@media (max-width: 767.98px) {
  :root {
    --layout-gutter: 16px;
  }
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  color: var(--color-dark);
}

a {
  transition: color var(--transition-fast);
}

::selection {
  background: var(--color-primary-soft-strong);
  color: var(--color-dark);
}

@media (max-width: 991px) {
  body {
    padding-bottom: var(--mobile-bottombar-h);
  }
}