frontend/src/css/base.css

/* Base Styles - Foundation for the entire application */
@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');

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-secondary-900);
  background-color: var(--color-accent-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Typography Base Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 0;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
  margin: 0;
  padding: 0;
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--color-primary-700);
}

a:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  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);
  font-weight: var(--font-weight-medium);
}

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

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :focus,
  .focus-visible:focus {
    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;
  }
}

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