/********** Variables — Mega Fresh Carolina Brand System **********/
:root {
  /* ── Brand Colors ── */
  --primary:        #CC0000;
  --primary-dark:   #A00000;
  --primary-light:  #FF4444;
  --secondary:      #1A1A1A;
  --accent:         #FFD000;

  /* ── Neutrals ── */
  --white:          #FFFFFF;
  --gray-50:        #F8F8F8;
  --gray-100:       #F0F0F0;
  --gray-200:       #E5E5E5;
  --gray-600:       #555555;
  --gray-900:       #1A1A1A;
  --light:          #F5F5F5;
  --dark:           #111111;

  /* ── Red tints for section backgrounds ── */
  --red-tint-1:     #FFF5F5;   /* very light warm blush */
  --red-tint-2:     #FFE8E8;   /* soft pink-red */
  --red-accent-bg:  rgba(204,0,0,0.06); /* subtle red wash */

  /* ── Typography ── */
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Open Sans', sans-serif;

  /* ── Spacing ── */
  --section-py:     80px;
  --section-py-sm:  40px;
  --radius:         12px;
  --radius-sm:      6px;
  --radius-pill:    50px;

  /* ── Shadows ── */
  --shadow-card:        0 4px 20px rgba(0,0,0,0.08);
  --shadow-card-hover:  0 8px 32px rgba(0,0,0,0.16);
  --shadow-nav:         0 2px 20px rgba(0,0,0,0.12);

  /* ── Transitions ── */
  --transition: all 0.25s ease;
}

/* ——— Bootstrap utility overrides ——— */
.bg-primary   { background-color: var(--primary)  !important; }
.text-primary { color:            var(--primary)  !important; }
.border-primary { border-color:   var(--primary)  !important; }
.bg-dark      { background-color: var(--secondary) !important; }

.btn-primary {
  background-color: var(--primary) !important;
  border-color:     var(--primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color:     var(--primary-dark) !important;
  color: #fff !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color:     var(--secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #333 !important;
  border-color:     #333 !important;
  color: #fff !important;
}

.btn-outline-primary {
  color:        var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* Spinner */
.spinner-border.text-primary { color: var(--primary) !important; }

/* ——— Typography ——— */
body {
  font-family: var(--font-body);
  color: #333;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.navbar-brand, .brand-logo {
  font-family: var(--font-heading);
}