/* On2Cook Brand Identity & Theme Definitions */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* On2Cook Color Palette */
  --brand-red: #ff0000;
  --brand-black: #000000;
  --brand-white: #ffffff;
  
  /* Accent variations derived from brand palette */
  --brand-red-hover: #cc0000;
  --brand-red-light: rgba(255, 0, 0, 0.08);
  --brand-dark-gray: #121212;
  --brand-gray: #333333;
  --brand-light-gray: #f5f5f5;
  --brand-border: #e5e5e5;

  /* On2Cook Typography */
  --font-title: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DIN Next', 'DIN Next LT Pro', 'DIN Next W01', 'DIN Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Global Font Application */
body {
  font-family: var(--font-body) !important;
  color: var(--brand-black);
  background-color: var(--brand-white);
}

/* Titles & Headings - Montserrat */
h1, h2, h3, h4, h5, h6,
.title, 
.heading, 
.hero-title, 
.section-title, 
.card-title,
.navbar-brand,
.brand-title,
.nav-link,
.btn-brand,
.btn-primary {
  font-family: var(--font-title) !important;
}

/* Body Elements & Inputs - DIN-Next */
p, span, li, a, label, input, select, textarea, button, td, th {
  font-family: var(--font-body);
}

/* Utility Brand Classes */
.text-brand-red {
  color: var(--brand-red) !important;
}

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

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

.bg-brand-red {
  background-color: var(--brand-red) !important;
}

.bg-brand-black {
  background-color: var(--brand-black) !important;
}

.bg-brand-white {
  background-color: var(--brand-white) !important;
}

.border-brand-red {
  border-color: var(--brand-red) !important;
}

/* Button Styling Overrides for Brand Consistency */
.btn-primary, 
button.cta-btn, 
.btn-red, 
.submit-btn {
  background-color: var(--brand-red) !important;
  color: var(--brand-white) !important;
  border-color: var(--brand-red) !important;
  font-family: var(--font-title);
  font-weight: 600;
}

.btn-primary:hover, 
button.cta-btn:hover, 
.btn-red:hover, 
.submit-btn:hover {
  background-color: var(--brand-red-hover) !important;
  border-color: var(--brand-red-hover) !important;
}