/* ==========================================================================
   Bootstrap Bridge — يربط متغيرات Bootstrap 5.3 بالـ tokens حقتنا
   أي عنصر Bootstrap (btn, alert, form-control...) ياخذ الهوية تلقائياً.
   لما ننتقل لـ Tailwind/React هذا الملف ينحذف بالكامل.
   ========================================================================== */

:root {
  --bs-primary: #2A6CB5;
  --bs-primary-rgb: 42, 108, 181;
  --bs-secondary: #F9A038;
  --bs-secondary-rgb: 249, 160, 56;
  --bs-dark: #272E36;
  --bs-dark-rgb: 39, 46, 54;

  --bs-primary-text-emphasis: var(--blue-700);
  --bs-primary-bg-subtle: var(--color-primary-subtle);
  --bs-primary-border-subtle: var(--blue-200);
  --bs-secondary-text-emphasis: var(--orange-800);
  --bs-secondary-bg-subtle: var(--color-secondary-subtle);
  --bs-secondary-border-subtle: var(--orange-200);

  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--leading-base);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-secondary-color: var(--color-text-muted);
  --bs-heading-color: var(--color-text);
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: 42, 108, 181;
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-link-hover-color-rgb: 36, 92, 155;
  --bs-border-color: var(--color-border);

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-full);

  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-focus-ring-color: var(--color-focus-ring);
}

/* الأزرار في Bootstrap تعرّف ألوانها داخل الكلاس نفسه، فنربطها هنا */
.btn-primary {
  --bs-btn-color: var(--color-on-primary);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-secondary {
  --bs-btn-color: var(--color-on-secondary);
  --bs-btn-bg: var(--color-secondary);
  --bs-btn-border-color: var(--color-secondary);
  --bs-btn-hover-color: var(--color-on-secondary);
  --bs-btn-hover-bg: var(--color-secondary-hover);
  --bs-btn-hover-border-color: var(--color-secondary-hover);
  --bs-btn-active-color: var(--color-on-secondary);
  --bs-btn-active-bg: var(--color-secondary-active);
  --bs-btn-active-border-color: var(--color-secondary-active);
  --bs-btn-disabled-color: var(--color-on-secondary);
  --bs-btn-disabled-bg: var(--color-secondary);
  --bs-btn-disabled-border-color: var(--color-secondary);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
}

.btn {
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-weight: var(--weight-semibold);
  --bs-btn-focus-box-shadow: 0 0 0 .25rem var(--color-focus-ring);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 .25rem var(--color-focus-ring);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}