/* ============================================
   FRESH GRILL KITCHEN — GLOBAL DESIGN SYSTEM
   Palette derived from the Fresh Grill Kitchen
   badge logo: signature red, cocoa browns, the
   green flame-leaf accent and its cream lettering.
   "Beyond Fresh. Beyond Ordinary."
   ============================================ */

:root {
  /* ========== COLOR PALETTE ========== */
  /* ---- BRAND PALETTE (sampled from the logo) ----
     red      #CE1C24  ring, "FRESH GRILL" wordmark, tagline
     brown    #6F3A28  lower badge circle
     brown-dk #3B1D14  band behind the wordmark
     green    #009B48  flame-leaf
     cream    #DCC9AE  "KITCHEN" lettering
     ------------------------------------------------ */
  --brand-red: #CE1C24;
  --brand-red-light: #EF3A41;
  --brand-red-dark: #A2141B;
  --brand-brown: #6F3A28;
  --brand-brown-dark: #3B1D14;
  --brand-green: #009B48;
  --brand-green-dark: #00753A;
  --brand-cream: #DCC9AE;

  /* Primary Colors - Dark Theme Base (warmed toward the badge brown) */
  --color-black: #14100E;
  --color-charcoal: #1E1613;
  --color-charcoal-light: #2A1E19;

  /* Accent Colors - Logo Red */
  --color-primary: #EF3A41;
  --color-primary-light: #EF3A41;
  --color-ember: #EF3A41;
  --color-flame: #EF3A41;

  /* Secondary accent - the green flame-leaf */
  --color-accent-green: #009B48;
  --color-accent-green-dark: #00753A;

  /* Neutral Colors */
  --color-cream: #F5EFE5;
  --color-cream-dark: #DCC9AE;
  --color-white: #FEFDFB;
  --color-gray: #9C8B80;
  --color-gray-light: #B5A599;

  /* Alert/Accent Color */
  --color-alert: #EF3A41;

  /* Color Opacity Variants */
  --color-primary-5: rgba(239, 58, 65, 0.05); /* #EF3A41 */
  --color-primary-10: rgba(239, 58, 65, 0.1);
  --color-primary-15: rgba(239, 58, 65, 0.15);
  --color-primary-30: rgba(239, 58, 65, 0.3);
  --color-cream-10: rgba(245, 239, 229, 0.1);
  --color-cream-30: rgba(245, 239, 229, 0.3);
  --color-black-50: rgba(20, 16, 14, 0.5);
  --color-black-80: rgba(20, 16, 14, 0.8);

  /* ========== LEGACY VARIABLES (DEPRECATED) ==========
     These are kept for backward compatibility during migration.
     Use the new design system variables above instead.
     Will be removed in future update.
  */
  --primaryLight: #EF3A41;
  --primary: #EF3A41;
  --secondary: #EF3A41;
  --secondaryLight: #EF3A41;
  --headerColor: #F5EFE5;
  --bodyTextColor: #9C8B80;
  --bodyTextColorWhite: #F5EFE5;
  --primary-color: #EF3A41;
  --primary-color-light: #EF3A41;
  --primary-color-dark: #CE1C24;
  --text-dark: #F5EFE5;
  --text-light: #9C8B80;
  --white: #FEFDFB;
  --main-color: #EF3A41;

  /* ========== TYPOGRAPHY ========== */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font: 'Cormorant Garamond', Georgia, serif;
  --body-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --topperFontSize: clamp(0.75rem, 1.5vw, 0.875rem);
  --headerFontSize: clamp(2rem, 4vw, 3rem);
  --bodyFontSize: 1rem;
  --fs-hero-title: clamp(3rem, 8vw, 6rem);
  --fs-section-title: clamp(2rem, 4vw, 3rem);
  --fs-card-title: clamp(1.25rem, 2vw, 1.5rem);

  /* ========== SPACING ========== */
  /* ========== FIXED NAVBAR METRICS ==========
     The navbar is position:fixed, so its height is not in the document
     flow and every hero must reserve it as top padding. Deriving the
     height from the logo (plus the nav's own vertical padding and
     border) keeps the two from ever drifting apart. */
  --nav-logo-height: 100px;
  --nav-height: calc(var(--nav-logo-height) + (2 * var(--space-sm)) + 1px);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --sectionPadding: clamp(4rem, 8vw, 6rem) 1.5rem;
  --max-width: 1200px;

  /* ========== TRANSITIONS ========== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== BORDERS & SHADOWS ========== */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 50px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow-primary: 0 4px 30px rgba(239, 58, 65, 0.3); /* #EF3A41 */
  --shadow-glow-primary-light: 0 4px 20px rgba(239, 58, 65, 0.22);  /* #EF3A41 */

  /* ========== Z-INDEX LAYERS ========== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-black);
  color: var(--color-cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  letter-spacing: 0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-cream);
}

.cs-topper,
.section-label {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  display: block;
}

.cs-title,
.section-title {
  font-size: var(--headerFontSize);
  font-weight: 500;
  line-height: 1.2em;
  max-width: 43.75rem;
  margin: 0 auto var(--space-sm) auto;
  color: var(--color-cream);
  font-family: var(--font-display);
  text-align: center;
}

.section-title em {
  font-style: italic;
  color: var(--color-primary);
}

.cs-text,
.section-subtitle {
  font-size: var(--bodyFontSize);
  line-height: 1.7em;
  max-width: 40.625rem;
  margin: 0;
  color: var(--color-gray);
}

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

.text-italic {
  font-style: italic;
}

.link-alert {
  color: var(--color-alert);
  font-weight: bold;
  text-decoration: underline;
}

.link-alert:hover {
  color: var(--color-ember);
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

.section__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sectionPadding);
}

.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-header .section-subtitle {
  margin: var(--space-sm) auto 0;
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.btn,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-black);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-medium);
  box-shadow: var(--shadow-glow-primary);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn:hover,
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 40px rgba(239, 58, 65, 0.5);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1rem 2rem;
  background: transparent;
  color: var(--color-cream);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(245, 240, 230, 0.3);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-medium);
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(245, 240, 230, 0.1);
  border-color: var(--color-cream);
}

.btn-ember,
.location-btn-primary {
  background: linear-gradient(135deg, var(--color-ember), var(--color-flame));
  color: var(--color-white);
  box-shadow: var(--shadow-glow-primary-light);
}

.btn-ember:hover,
.location-btn-primary:hover {
  box-shadow: 0 6px 30px rgba(198, 100, 0, 0.5);
  transform: translateY(-2px);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes flameDance {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes scrollLine {
  0%, 100% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }
}