/* ==========================================================================
   HVAC Manager - Modular CSS Architecture
   Design System Variables & Custom Styles
   ========================================================================== */

:root {
  /* Color Palette - Design Tokens */
  --color-primary: #004ac6;
  --color-primary-container: #2563eb;
  --color-on-primary: #ffffff;
  --color-secondary: #00687a;
  --color-surface: #faf8ff;
  --color-surface-container: #ededf9;
  --color-surface-container-high: #e7e7f3;
  --color-surface-container-lowest: #ffffff;
  --color-background: #faf8ff;
  --color-on-surface: #191b23;
  --color-on-surface-variant: #434655;
  --color-outline: #737686;
  --color-outline-variant: #c3c6d7;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;

  /* Layout Spacing */
  --sidebar-width: 260px;
  --header-height: 72px;

  /* Transitions & Animations */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 15px -5px rgba(0, 0, 0, 0.03);
  --shadow-elevated: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Dark Theme Overrides */
.dark {
  --color-surface: #191b23;
  --color-background: #111318;
  --color-on-surface: #f0f0fb;
  --color-on-surface-variant: #c3c6d7;
  --color-surface-container: #232530;
  --color-surface-container-high: #2e3039;
  --color-surface-container-lowest: #191b23;
  --color-outline: #8c8e9f;
  --color-outline-variant: #434655;
}

/* Base Styles & Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-on-surface);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Accessibility Focus Ring (WCAG Compliance) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Custom Card & Elevation Styles */
.card-shadow {
  box-shadow: var(--shadow-card);
}

.card-elevated {
  box-shadow: var(--shadow-elevated);
}

/* Custom Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out forwards;
}

.animate-slide-in {
  animation: slideInLeft var(--transition-normal) ease-out forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

/* Print Optimization */
@media print {
  aside, header, button:not(.print-keep), .no-print {
    display: none !important;
  }
  main, .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}