/* ==========================================================
   Secure Bootstrap Starter — Root Color Variables
   Primary:   #af1216 (deep red)
   Secondary: #000000 (black)
   Is file ko header.php se pehle ya custom.css ke sabse upar
   enqueue/include karein taaki poore theme me yeh variables
   available ho jayein.
   ========================================================== */

:root {
  /* ---------- Brand Colors ---------- */
  --color-primary: #af1216;
  --color-primary-rgb: 175, 18, 22; /* rgba() me use karne ke liye */
  --color-primary-light: #d1454a; /* hover / lighter accents */
  --color-primary-dark: #7a0d10; /* active / pressed state */

  --color-secondary: #000000;
  --color-secondary-rgb: 0, 0, 0;
  --color-secondary-light: #2b2b2b; /* thoda soft black, cards/panels ke liye */
  --color-secondary-lighter: #4d4d4d; /* muted text ke liye */

  /* ---------- Neutrals / Grayscale ---------- */
  --color-white: #ffffff;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* ---------- Backgrounds ---------- */
  --color-bg-body: var(--color-white);
  --color-bg-dark: var(--color-secondary);
  --color-bg-light: var(--color-gray-100);
  --color-bg-surface: var(--color-white); /* cards, panels */

  /* ---------- Text ---------- */
  --color-text-heading: var(--color-secondary);
  --color-text-body: var(--color-gray-800);
  --color-text-muted: var(--color-gray-600);
  --color-text-on-primary: var(--color-white);
  --color-text-on-secondary: var(--color-white);
  --color-text-link: var(--color-primary);
  --color-text-link-hover: var(--color-primary-dark);

  /* ---------- Borders ---------- */
  --color-border: var(--color-gray-300);
  --color-border-dark: var(--color-secondary);
  --color-focus-ring: rgba(var(--color-primary-rgb), 0.35);

  /* ---------- State / Feedback Colors ---------- */
  --color-success: #1e7e34;
  --color-warning: #b8860b;
  --color-danger: var(
    --color-primary
  ); /* danger = brand primary hi rakha hai */
  --color-info: #0d6efd;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* ==========================================================
   Bootstrap 5 variable overrides — is se Bootstrap ke built-in
   components (buttons, links, navbar, badges, alerts, etc.)
   automatically naye colors utha lenge, bina har class ko
   manually override kiye.
   ========================================================== */
:root {
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);

  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);

  --bs-body-color: var(--color-text-body);
  --bs-body-bg: var(--color-bg-body);

  --bs-border-color: var(--color-border);
}

/* ---------- Bootstrap component ka color use karne ke examples ---------- */

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

a {
  color: var(--color-text-link);
}
a:hover {
  color: var(--color-text-link-hover);
}

.navbar {
  background-color: var(--color-bg-body);
  border-bottom: 1px solid var(--color-border);
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--color-primary) !important;
}

.site-footer {
  background-color: var(--color-secondary) !important;
  color: var(--color-white);
}

.badge-primary,
.bg-primary {
  background-color: var(--color-primary) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}