/* 
   Design System: The Industrial Editorial 
   Brand: Chevrolet Buick GMC of Sanger
*/

:root {
  /* Colors */
  --surface: #f7f9fb;
  --surface-container-low: #f2f4f6;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --midnight: #1A1A1B;
  --poppy: #FF8C00;
  --on-surface: #191c1e;
  --on-surface-variant: #46474a;
  --inverse-on-surface: #eff1f3;
  --primary: #000000;
  --tertiary-fixed: #ffdcc3;
  --on-tertiary-fixed-variant: #6e3900;
  
  /* Spacing Tokens */
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* Transitions */
  --ease-mechanical: cubic-bezier(0.3, 0, 0.2, 1);
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Epilogue', sans-serif;
  letter-spacing: -0.02em;
}

/* The No-Line Rule */
section {
  border: none !important;
}

/* Glass & Gradient */
.glass-panel {
  background: rgba(26, 26, 27, 0.7);
  backdrop-filter: blur(20px);
}

.signature-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #1b1b1c 100%);
}

/* Typography Scale */
.display-lg { font-size: 5rem; font-weight: 900; line-height: 0.9; }
.display-md { font-size: 3.5rem; font-weight: 800; line-height: 1; }
.headline-lg { font-size: 2.5rem; font-weight: 700; }
.label-md { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; font-size: 0.75rem; }

/* Custom Utilities */
.mechanical-easing {
  transition: all 0.5s var(--ease-mechanical);
}

.hover-scale {
  transition: transform 0.6s var(--ease-mechanical);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.underline-expand {
  position: relative;
  display: inline-block;
}

.underline-expand::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: var(--poppy);
  transition: all 0.3s var(--ease-mechanical);
  transform: translateX(-50%);
}

.underline-expand:hover::after {
  width: 100%;
}

/* Button Styles */
.btn-primary {
  background-color: var(--on-tertiary-fixed-variant);
  color: white;
  padding: 1rem 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.375rem;
  transition: all 0.3s var(--ease-mechanical);
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--surface-container-highest);
  color: var(--on-surface);
  padding: 1rem 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.375rem;
  transition: all 0.3s var(--ease-mechanical);
}