/* Base Styles - Reset, Variables, Global Styles */

/* CSS Variables */
:root {
  /* Colors */
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  
  /* Footer Colors */
  --footer-bg: #1C2C78;
  --footer-text-primary: #ffffff;
  --footer-text-secondary: #ccd5e2;
  --footer-text-hover: #ffffff;
  --footer-icon-color: #ccd5e2;
  --footer-transition: color 0.3s ease;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Typography */
  --font-family-primary: 'Roboto', sans-serif;
  --font-family-serif: 'Merriweather', serif;
  --font-family-sans: 'Quicksand', sans-serif;
}

/* Global Styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-primary);
  /* Font can be overridden by admin-selected font via inline style in base.html */
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

main {
  padding: 20px;
}

/* Skip Link - Accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 0;
  width: auto;
  height: auto;
  padding: 8px;
  background: #000;
  color: #fff;
  z-index: 10000;
}

/* Dark Mode */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

body.dark-mode .navbar-custom {
  background-color: #1f1f1f;
}

body.dark-mode .card,
body.dark-mode .dropdown-menu {
  background-color: #2c2c2c;
  color: #f0f0f0;
}