frontend/src/index.css

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS Custom Properties for Theming */
:root {
  /* Color System */
  --color-primary-50: #FFF5F5;
  --color-primary-100: #FFE4E4;
  --color-primary-200: #FFCCCC;
  --color-primary-300: #FFB3B3;
  --color-primary-400: #FF9999;
  --color-primary-500: #FF8080;
  --color-primary-600: #FF6666;
  --color-primary-700: #E65555;
  --color-primary-800: #CC4444;
  --color-primary-900: #910029;
  --color-primary-950: #6B0021;
  
  --color-secondary-50: #F8F9FA;
  --color-secondary-100: #E9ECEF;
  --color-secondary-200: #DEE2E6;
  --color-secondary-300: #CED4DA;
  --color-secondary-400: #ADB5BD;
  --color-secondary-500: #6C757D;
  --color-secondary-600: #495057;
  --color-secondary-700: #343A40;
  --color-secondary-800: #212529;
  --color-secondary-900: #39404B;
  --color-secondary-950: #1A1E22;
  
  --color-accent-50: #F8FAFC;
  --color-accent-100: #F1F5F9;
  --color-accent-200: #E2E8F0;
  --color-accent-300: #CBD5E1;
  --color-accent-400: #94A3B8;
  --color-accent-500: #64748B;
  --color-accent-600: #475569;
  --color-accent-700: #334155;
  --color-accent-800: #1E293B;
  --color-accent-900: #0F172A;
  --color-accent-950: #020617;
  
  --color-success-500: #22C55E;
  --color-warning-500: #F59E0B;
  --color-error-500: #EF4444;
  --color-info-500: #0EA5E9;
  
  /* Typography */
  --font-family-sans: 'Roboto', system-ui, sans-serif;
  --font-family-display: 'Pacifico', cursive;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
  
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;
  
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Spacing */
  --spacing-px: 1px;
  --spacing-05: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-15: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-25: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-35: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  
  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 0.125rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
  
  /* Z-Index */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  
  /* Transitions */
  --transition-fast: 75ms;
  --transition-normal: 100ms;
  --transition-slow: 200ms;
  --transition-slower: 300ms;
  --transition-slowest: 500ms;
  
  /* Opacity */
  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-50: 0.5;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-100: 1;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary-50: #6B0021;
    --color-primary-100: #910029;
    --color-primary-200: #CC4444;
    --color-primary-300: #E65555;
    --color-primary-400: #FF6666;
    --color-primary-500: #FF8080;
    --color-primary-600: #FF9999;
    --color-primary-700: #FFB3B3;
    --color-primary-800: #FFCCCC;
    --color-primary-900: #FFE4E4;
    --color-primary-950: #FFF5F5;
    
    --color-secondary-50: #1A1E22;
    --color-secondary-100: #39404B;
    --color-secondary-200: #212529;
    --color-secondary-300: #343A40;
    --color-secondary-400: #495057;
    --color-secondary-500: #6C757D;
    --color-secondary-600: #ADB5BD;
    --color-secondary-700: #CED4DA;
    --color-secondary-800: #DEE2E6;
    --color-secondary-900: #E9ECEF;
    --color-secondary-950: #F8F9FA;
    
    --color-accent-50: #020617;
    --color-accent-100: #0F172A;
    --color-accent-200: #1E293B;
    --color-accent-300: #334155;
    --color-accent-400: #475569;
    --color-accent-500: #64748B;
    --color-accent-600: #94A3B8;
    --color-accent-700: #CBD5E1;
    --color-accent-800: #E2E8F0;
    --color-accent-900: #F1F5F9;
    --color-accent-950: #F8FAFC;
  }
}

/* Base Styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-secondary-900);
  background-color: var(--color-accent-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Enhanced Typography Classes */
.text-display {
  font-family: var(--font-family-display);
  font-weight: 400;
  line-height: var(--leading-tight);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-relaxed);
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--leading-loose);
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--leading-loose);
}

.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
}

.text-6xl {
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
}

.text-7xl {
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
}

.text-8xl {
  font-size: var(--text-8xl);
  line-height: var(--leading-tight);
}

.text-9xl {
  font-size: var(--text-9xl);
  line-height: var(--leading-tight);
}

/* Enhanced Custom Animations */
@keyframes fadeIn {
  from {
    opacity: var(--opacity-0);
  }
  to {
    opacity: var(--opacity-100);
  }
}

@keyframes slideUp {
  from {
    opacity: var(--opacity-0);
    transform: translateY(20px);
  }
  to {
    opacity: var(--opacity-100);
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: var(--opacity-0);
    transform: translateY(-20px);
  }
  to {
    opacity: var(--opacity-100);
    transform: translateY(0);
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: var(--opacity-0);
    transform: scale(0.95);
  }
  to {
    opacity: var(--opacity-100);
    transform: scale(1);
  }
}

@keyframes bounceSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulseSlow {
  0%, 100% {
    opacity: var(--opacity-100);
  }
  50% {
    opacity: var(--opacity-80);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: var(--opacity-0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: var(--opacity-100);
  }
  50% {
    opacity: var(--opacity-50);
  }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

.animate-slide-down {
  animation: slideDown 0.5s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

.animate-bounce-subtle {
  animation: bounceSubtle 0.6s ease-in-out;
}

.animate-pulse-slow {
  animation: pulseSlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Enhanced Custom Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-accent-100);
  border-radius: var(--radius);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-secondary-400);
  border-radius: var(--radius);
  transition: background-color var(--transition-normal);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-500);
}

/* Enhanced Focus Styles for Accessibility */
.focus-ring:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.focus-ring-inset:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: calc(2px * -1);
}

.focus-ring-none:focus {
  outline: none;
}

/* Focus Visible for Better Keyboard Navigation */
.focus-visible:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Focus Within for Container Elements */
.focus-within:focus-within {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Skip to Content Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary-600);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius);
  z-index: var(--z-50);
}

.skip-link:focus {
  top: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .focus-ring:focus,
  .focus-visible:focus,
  .focus-within:focus-within {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print Styles Optimization */
@media print {
  /* Hide non-essential elements */
  .no-print,
  .sidebar,
  .header,
  .footer,
  .navigation,
  .modal,
  .tooltip,
  .popover,
  .notification {
    display: none !important;
  }
  
  /* Ensure proper text contrast */
  body {
    color: black;
    background: white;
  }
  
  /* Remove background images and colors */
  * {
    background: none !important;
    box-shadow: none !important;
  }
  
  /* Optimize font sizes for print */
  h1 {
    font-size: 24pt;
  }
  
  h2 {
    font-size: 18pt;
  }
  
  h3 {
    font-size: 14pt;
  }
  
  /* Ensure links are visible */
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  
  /* Break content properly across pages */
  * {
    page-break-inside: avoid;
  }
  
  tr, img {
    page-break-inside: avoid;
  }
  
  thead {
    display: table-header-group;
  }
  
  tfoot {
    display: table-footer-group;
  }
  
  /* Add print-specific spacing */
  @page {
    margin: 1in;
  }
  
  /* Ensure proper line breaks */
  .page-break {
    page-break-before: always;
  }
  
  .page-break-after {
    page-break-after: always;
  }
  
  .no-break {
    page-break-inside: avoid;
  }
}

/* Utility Classes for Design System */
/* Color Utilities */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }
.bg-primary-950 { background-color: var(--color-primary-950); }

.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }
.text-primary-950 { color: var(--color-primary-950); }

.border-primary-50 { border-color: var(--color-primary-50); }
.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }
.border-primary-800 { border-color: var(--color-primary-800); }
.border-primary-900 { border-color: var(--color-primary-900); }
.border-primary-950 { border-color: var(--color-primary-950); }

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-05 { padding: var(--spacing-05); }
.p-1 { padding: var(--spacing-1); }
.p-15 { padding: var(--spacing-15); }
.p-2 { padding: var(--spacing-2); }
.p-25 { padding: var(--spacing-25); }
.p-3 { padding: var(--spacing-3); }
.p-35 { padding: var(--spacing-35); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }
.p-32 { padding: var(--spacing-32); }

.m-0 { margin: 0; }
.m-05 { margin: var(--spacing-05); }
.m-1 { margin: var(--spacing-1); }
.m-15 { margin: var(--spacing-15); }
.m-2 { margin: var(--spacing-2); }
.m-25 { margin: var(--spacing-25); }
.m-3 { margin: var(--spacing-3); }
.m-35 { margin: var(--spacing-35); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }

/* Border Radius Utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* Z-Index Utilities */
.z-0 { z-index: var(--z-0); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }
.z-auto { z-index: var(--z-auto); }

/* Transition Utilities */
.transition-none { transition: none; }
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }
.transition-slower { transition: all var(--transition-slower); }
.transition-slowest { transition: all var(--transition-slowest); }

/* Opacity Utilities */
.opacity-0 { opacity: var(--opacity-0); }
.opacity-25 { opacity: var(--opacity-25); }
.opacity-50 { opacity: var(--opacity-50); }
.opacity-75 { opacity: var(--opacity-75); }
.opacity-100 { opacity: var(--opacity-100); }

/* Component Base Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(145, 0, 41, 0.1);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-primary-600);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--color-secondary-200);
  color: var(--color-secondary-800);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background-color: var(--color-accent-500);
  color: white;
}

.btn-accent:hover:not(:disabled) {
  background-color: var(--color-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-success {
  background-color: var(--color-success-500);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-warning {
  background-color: var(--color-warning-500);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background-color: var(--color-warning-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-error {
  background-color: var(--color-error-500);
  color: white;
}

.btn-error:hover:not(:disabled) {
  background-color: var(--color-error-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--spacing-6);
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.input {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--color-secondary-300);
  border-radius: var(--radius);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: all var(--transition-normal);
  background-color: white;
  color: black;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(145, 0, 41, 0.1);
}

.input::placeholder {
  color: var(--color-secondary-500);
}

.input:disabled {
  background-color: var(--color-accent-100);
  cursor: not-allowed;
}

/* Responsive Typography */
@media (max-width: 640px) {
  .text-4xl { font-size: var(--text-3xl); }
  .text-5xl { font-size: var(--text-4xl); }
  .text-6xl { font-size: var(--text-5xl); }
  .text-7xl { font-size: var(--text-6xl); }
  .text-8xl { font-size: var(--text-7xl); }
  .text-9xl { font-size: var(--text-8xl); }
}

/* Responsive Header Adjustments */
@media (max-width: 1023px) {
  /* Ensure proper spacing for mobile header */
  .header-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}