/* Base styles and CSS custom properties for theming */
:root {
  /* Color scheme */
  --primary-color: #175199;
  --primary-hover: #0056b3;
  --secondary-color: #5bc0de;
  --secondary-hover: #31b0d5;
  --danger-color: #e40033;
  --success-color: #28a745;
  --dark-gray: #555555;
  --light-gray: #f4f4f4;
  --medium-gray: #f2f2f2;
  --text-color: #333;
  --border-color: #ddd;
  
  /* Typography */
  --font-family: 'Arial', sans-serif;
  --font-size-base: 16px;
  --font-size-large: 18px;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  
  /* Shadows */
  --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

/* Base body styles */
body {
  font-family: var(--font-family);
  margin: 0;
  padding: var(--spacing-sm);
  background-color: var(--light-gray);
  color: var(--text-color);
}

h1, h3 {
  color: var(--text-color);
}

.container {
  margin-top: var(--spacing-md);
}

/* Error messages */
.error-message {
  color: red;
}