/*
 * CmsProject — Bootstrap ↔ CMS token köprüsü
 * ------------------------------------------------------------------
 * Bootstrap 5 (vendor/bootstrap) public temada grid + bileşen + utility
 * için kullanılır. Bu dosya Bootstrap'in --bs-* değişkenlerini bizim
 * --cms-* palet token'larımıza bağlar; böylece palet seçimi ve açık/koyu
 * mod (data-theme-mode) Bootstrap bileşenlerini de yönetir.
 *
 * Yükleme sırası (ÖNEMLİ):
 *   1) vendor/bootstrap/css/bootstrap.min.css   (Bootstrap defaults)
 *   2) bootstrap-bridge.css                     (BU dosya — --bs eşlemesi)
 *   3) blocks.css + layout.css                  (cms-* kurallar override eder)
 *   4) <style>:root palette</style>             (theme.json paleti — en son)
 *
 * YALNIZ public (_PublicLayout + GrapesJS canvas) yüklenir; admin Metronic'e
 * sızmaz (admin app.css/Tailwind ayrı pipeline).
 */

:root {
  /* Ana renkler — palet primary'sine bağla */
  --bs-primary: var(--cms-primary);
  --bs-primary-rgb: 37, 99, 235; /* fallback; renk hesapları için (token rgb veremez) */
  --bs-link-color: var(--cms-primary);
  --bs-link-hover-color: var(--cms-primary-dark);

  /* Gövde renk/zemin — açık mod token'ları */
  --bs-body-color: var(--cms-text);
  --bs-body-bg: var(--cms-bg);
  --bs-secondary-color: var(--cms-muted);
  --bs-tertiary-bg: var(--cms-surface);
  --bs-secondary-bg: var(--cms-surface);

  /* Kenarlık + köşe + tipografi */
  --bs-border-color: var(--cms-border);
  --bs-border-radius: var(--cms-radius);
  --bs-border-radius-sm: calc(var(--cms-radius) - 2px);
  --bs-border-radius-lg: calc(var(--cms-radius) + 4px);
  --bs-body-font-family: var(--cms-font);
  --bs-heading-color: var(--cms-text);

  /* Kart (testimonial vb. Bootstrap card) */
  --bs-card-bg: var(--cms-surface);
  --bs-card-color: var(--cms-text);
  --bs-card-border-color: var(--cms-border);
  --bs-card-border-radius: var(--cms-radius);

  /* Emphasis (koyu metin tonu) */
  --bs-emphasis-color: var(--cms-text);
}

/* Açık/Koyu mod: data-theme-mode="dark" altında dark token'lara geç.
   (cms token'ları zaten dark'a göre değişiyor; burada Bootstrap'in
   kendi dark mantığını devre dışı bırakıp token'lara sabitliyoruz.) */
[data-theme-mode="dark"] {
  --bs-body-color: var(--cms-text);
  --bs-body-bg: var(--cms-bg);
  --bs-secondary-color: var(--cms-muted);
  --bs-tertiary-bg: var(--cms-surface);
  --bs-secondary-bg: var(--cms-surface);
  --bs-border-color: var(--cms-border);
  --bs-heading-color: var(--cms-text);
  --bs-emphasis-color: var(--cms-text);
  --bs-card-bg: var(--cms-surface);
  --bs-card-color: var(--cms-text);
  --bs-card-border-color: var(--cms-border);
}

/* Bootstrap .btn-primary token'a bağlı (sabit mavi yerine palet primary) */
.btn-primary {
  --bs-btn-bg: var(--cms-primary);
  --bs-btn-border-color: var(--cms-primary);
  --bs-btn-color: var(--cms-on-primary);
  --bs-btn-hover-bg: var(--cms-primary-dark);
  --bs-btn-hover-border-color: var(--cms-primary-dark);
  --bs-btn-active-bg: var(--cms-primary-dark);
  --bs-btn-active-border-color: var(--cms-primary-dark);
  --bs-btn-disabled-bg: var(--cms-primary);
  --bs-btn-disabled-border-color: var(--cms-primary);
}

/* Accent köprüsü — Bootstrap'in .btn-accent / .text-accent / .bg-accent
   yardımcılarını CMS accent token'ına bağlar (canlılık/CTA). */
.btn-accent {
  --bs-btn-bg: var(--cms-accent);
  --bs-btn-border-color: var(--cms-accent);
  --bs-btn-color: var(--cms-on-accent);
  --bs-btn-hover-bg: var(--cms-accent-dark);
  --bs-btn-hover-border-color: var(--cms-accent-dark);
  --bs-btn-hover-color: var(--cms-on-accent);
  --bs-btn-active-bg: var(--cms-accent-dark);
  --bs-btn-active-border-color: var(--cms-accent-dark);
  --bs-btn-active-color: var(--cms-on-accent);
  --bs-btn-disabled-bg: var(--cms-accent);
  --bs-btn-disabled-border-color: var(--cms-accent);
  --bs-btn-disabled-color: var(--cms-on-accent);
}
.text-accent { color: var(--cms-accent) !important; }
.bg-accent { background-color: var(--cms-accent) !important; color: var(--cms-on-accent) !important; }

/* Bootstrap container'ı bizim container token'ımıza hizala (boxed genişlik tutarlı).
   xxl üstü dahil tüm breakpoint'lerde max-width = --cms-container. */
.container {
  max-width: var(--cms-container);
}