/* 
 * BOLLCO BRAND GUIDELINES
 * ======================
 * 
 * COLOR PALETTE:
 * Primary: #E63E2B (Red)
 * Secondary: #FEC019 (Yellow) 
 * White: #FFFFFF
 * Light Gray: #EEEEEE
 * Black: #000000
 * 
 * TYPOGRAPHY:
 * Primary Font: Poppins (Regular, Semibold)
 * Secondary Font: League Spartan
 * Fallback: Public Sans
 */

/* ===============================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =============================== */
:root {
  /* Brand Colors */
  --bollco-red: #E63E2B;
  --bollco-yellow: #FEC019;
  --bollco-white: #FFFFFF;
  --bollco-light-gray: #EEEEEE;
  --bollco-black: #000000;
  
  /* Brand Fonts */
  --font-primary: 'Poppins', 'Public Sans', sans-serif;
  --font-secondary: 'League Spartan', 'Public Sans', sans-serif;
  --font-fallback: 'Public Sans', sans-serif;
  
  /* Typography Scale */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  
  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ===============================
   GLOBAL TYPOGRAPHY OVERRIDES
   =============================== */

/* Base body font */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  color: var(--bollco-black);
  background-color: var(--bollco-light-gray);
}

/* Headings - Use League Spartan for impact */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--bollco-red);
  line-height: 1.3;
}

h1, .h1 { font-size: var(--font-size-4xl); }
h2, .h2 { font-size: var(--font-size-3xl); }
h3, .h3 { font-size: var(--font-size-2xl); }
h4, .h4 { font-size: var(--font-size-xl); }
h5, .h5 { font-size: var(--font-size-lg); }
h6, .h6 { font-size: var(--font-size-base); }

/* Paragraph text - Use Poppins Regular */
p, .text-base {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  color: var(--bollco-black);
  line-height: 1.6;
}

/* Emphasis text - Use Poppins Semibold */
strong, b, .font-semibold {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
}

/* ===============================
   BRAND COLOR UTILITIES
   =============================== */

/* Text Colors */
.text-primary { color: var(--bollco-red) !important; }
.text-secondary { color: var(--bollco-yellow) !important; }
.text-white { color: var(--bollco-white) !important; }
.text-black { color: var(--bollco-black) !important; }
.text-light-gray { color: var(--bollco-light-gray) !important; }

/* Background Colors */
.bg-primary { background-color: var(--bollco-red) !important; }
.bg-secondary { background-color: var(--bollco-yellow) !important; }
.bg-white { background-color: var(--bollco-white) !important; }
.bg-black { background-color: var(--bollco-black) !important; }
.bg-light-gray { background-color: var(--bollco-light-gray) !important; }

/* Border Colors */
.border-primary { border-color: var(--bollco-red) !important; }
.border-secondary { border-color: var(--bollco-yellow) !important; }
.border-white { border-color: var(--bollco-white) !important; }
.border-black { border-color: var(--bollco-black) !important; }
.border-light-gray { border-color: var(--bollco-light-gray) !important; }

/* ===============================
   TYPOGRAPHY UTILITIES
   =============================== */

/* Font Families */
.font-primary { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-fallback { font-family: var(--font-fallback) !important; }

/* Font Weights */
.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Font Sizes */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* ===============================
   COMPONENT OVERRIDES
   =============================== */

/* Buttons */
.btn-primary {
  background-color: var(--bollco-red);
  border-color: var(--bollco-red);
  color: var(--bollco-white);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #c63522;
  border-color: #c63522;
  color: var(--bollco-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 62, 43, 0.3);
}

.btn-secondary {
  background-color: var(--bollco-yellow);
  border-color: var(--bollco-yellow);
  color: var(--bollco-black);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e5ac15;
  border-color: #e5ac15;
  color: var(--bollco-black);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(254, 192, 25, 0.3);
}

/* Cards */
.card {
  background-color: var(--bollco-white);
  border: 1px solid rgba(238, 238, 238, 0.8);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  background-color: var(--bollco-white);
  border-bottom: 1px solid var(--bollco-light-gray);
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--bollco-red);
}

/* Form Controls */
.form-control {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  border-radius: 8px;
  border: 1px solid #d1d5db;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  border-color: var(--bollco-red);
  box-shadow: 0 0 0 3px rgba(230, 62, 43, 0.1);
}

.form-label {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--bollco-black);
  margin-bottom: 0.5rem;
}

/* Navigation */
.navbar {
  background-color: var(--bollco-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-bold);
  color: var(--bollco-red);
  font-size: var(--font-size-xl);
}

.nav-link {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  color: var(--bollco-black);
  transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--bollco-red);
}

.nav-link.active {
  color: var(--bollco-red);
  font-weight: var(--font-weight-semibold);
}

/* Menu */
.menu-link {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  color: var(--bollco-black);
  transition: color 0.3s ease;
}

.menu-link:hover,
.menu-link:focus {
  color: var(--bollco-red);
}

.menu-link.active {
  color: var(--bollco-red);
  font-weight: var(--font-weight-semibold);
}

/* Tables */
.table {
  font-family: var(--font-primary);
}

.table thead th {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--bollco-red);
  background-color: var(--bollco-light-gray);
  border-bottom: 2px solid var(--bollco-red);
}

/* Alerts */
.alert-primary {
  background-color: rgba(230, 62, 43, 0.1);
  border-color: var(--bollco-red);
  color: var(--bollco-red);
}

.alert-warning {
  background-color: rgba(254, 192, 25, 0.1);
  border-color: var(--bollco-yellow);
  color: #b8860b;
}

/* ===============================
   RESPONSIVE TYPOGRAPHY
   =============================== */

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-3xl: 1.625rem;  /* 26px */
    --font-size-2xl: 1.375rem;  /* 22px */
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-4xl: 1.75rem;   /* 28px */
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-2xl: 1.25rem;   /* 20px */
  }
}

/* ===============================
   PRINT STYLES
   =============================== */

@media print {
  * {
    font-family: var(--font-primary) !important;
    color: var(--bollco-black) !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary) !important;
    color: var(--bollco-black) !important;
  }
}