/* 
The Heritage Atelier Design System
Project: Contact Us - El Paso Furniture & Style
*/

:root {
  /* Typography */
  --font-display: 'Noto Serif', serif;
  --font-body: 'Manrope', sans-serif;
  
  /* Color Palette */
  --surface: #f9f9f7;
  --surface-bright: #f9f9f7;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f4f2;
  --surface-container: #eeeeec;
  --surface-container-high: #e8e8e6;
  --surface-container-highest: #e2e3e1;
  
  --on-surface: #1a1c1b;
  --on-surface-variant: #5e3f3b;
  
  --primary: #b5000b;
  --primary-container: #e30613; /* Heritage Red */
  --on-primary: #ffffff;
  
  --outline-variant: rgba(233, 188, 182, 0.15); /* For ghost borders */
  
  /* Spacing */
  --spacing-4: 1rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-20: 5rem;
  
  /* Radii */
  --radius-full: 9999px;
  --radius-xl: 0.75rem;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-lg {
  font-family: var(--font-display);
  margin-top: 0;
}

/* Glassmorphism utility */
.glass-panel {
  background-color: rgba(249, 249, 247, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Base button */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(26, 28, 27, 0.05); /* Tonal shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(26, 28, 27, 0.08); /* Glow effect equivalent */
}

/* Utility classes */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.surface-lowest { background-color: var(--surface-container-lowest); }
.surface-low { background-color: var(--surface-container-low); }
.surface-container { background-color: var(--surface-container); }

img {
  max-width: 100%;
  border-radius: var(--radius-xl);
  display: block;
}

/* ----------------------------------------------------
   Heritage Atelier Dark Mode Variable Redefinitions
   ---------------------------------------------------- */
.dark {
  --surface: #121212;
  --surface-bright: #1a1c1b;
  --surface-container-lowest: #080808;
  --surface-container-low: #181818;
  --surface-container: #202020;
  --surface-container-high: #282828;
  --surface-container-highest: #303030;
  
  --on-surface: #f9f9f7;
  --on-surface-variant: #eeeeec;
  
  --outline-variant: rgba(255, 255, 255, 0.1);
}

.dark body {
  background-color: var(--surface) !important;
  color: var(--on-surface) !important;
}

/* ----------------------------------------------------
   Tailwind CSS Dark Mode Class Overrides (Global)
   ---------------------------------------------------- */
.dark .bg-surface { background-color: var(--surface) !important; }
.dark .bg-background { background-color: var(--surface) !important; }
.dark .bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.dark .bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.dark .bg-surface-container { background-color: var(--surface-container) !important; }
.dark .bg-surface-container-high { background-color: var(--surface-container-high) !important; }
.dark .bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }
.dark .bg-secondary-container { background-color: var(--surface-container-high) !important; }

/* Text Overrides */
.dark .text-on-surface { color: var(--on-surface) !important; }
.dark .text-on-surface-variant { color: var(--on-surface-variant) !important; }
.dark .text-secondary { color: var(--on-surface-variant) !important; }
.dark .text-on-surface-variant\/80 { color: rgba(238, 238, 236, 0.8) !important; }
.dark .text-on-surface-variant\/60 { color: rgba(238, 238, 236, 0.6) !important; }

/* Hex-specific Class Redefinitions (Static Tailwind compiled) */
.dark .text-\[\#1a1c1b\] { color: var(--on-surface) !important; }
.dark .text-\[\#1a1c1b\]\/40 { color: rgba(238, 238, 236, 0.4) !important; }
.dark .text-\[\#1a1c1b\]\/60 { color: rgba(238, 238, 236, 0.6) !important; }
.dark .text-\[\#1a1c1b\]\/80 { color: rgba(238, 238, 236, 0.8) !important; }
.dark .bg-\[\#f9f9f7\] { background-color: var(--surface) !important; }
.dark .bg-\[\#eeeeec\] { background-color: var(--surface-container-low) !important; }

/* Interactive Modals and Sidebars Drawer */
.dark #history-drawer .relative, 
.dark #quote-inquiry-modal .relative {
  background-color: var(--surface-container-lowest) !important;
  border-color: var(--outline-variant) !important;
}
.dark #history-drawer h3, 
.dark #history-drawer h4,
.dark #quote-inquiry-modal h2, 
.dark #quote-inquiry-modal h3 {
  color: var(--on-surface) !important;
}
.dark #history-drawer .bg-surface {
  background-color: var(--surface-container-low) !important;
  border-color: var(--outline-variant) !important;
}

/* Border and Outlines overrides */
.dark header, .dark footer, .dark nav {
  border-color: var(--outline-variant) !important;
}
.dark .border-outline-variant\/10 { border-color: var(--outline-variant) !important; }
.dark .border-outline-variant\/20 { border-color: var(--outline-variant) !important; }
.dark .border-outline-variant\/30 { border-color: var(--outline-variant) !important; }
.dark .divide-outline-variant\/10 > * { border-color: var(--outline-variant) !important; }