/* base.css - Global styles, resets, typography, utility classes */
:root {
  --dark-bg: #121212;
  --dark-card: #1e1e1e;
  --text-color: #e0e0e0;
  --light-text-color: #aaaaaa;
  --accent-gold: #ffc107;
  --accent-silver: #bdbdbd;
  --accent-bronze: #cd7f32;
  --link-color: #64b5f6;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.15);
  --focus-ring: rgba(100, 181, 246, 0.4);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-color);
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #90caf9;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-color);
  margin-top: 0;
  font-weight: 500;
}

/* Utility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Placeholder for images if not found */
img:not([src]):not([srcset]) {
  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="3" width="18" height="18" rx="2" ry="2"%3E%3C/rect%3E%3Ccircle cx="8.5" cy="8.5" r="1.5"%3E%3C/circle%3E%3Cpolyline points="21 15 16 10 5 21"%3E%3C/polyline%3E%3C/svg%3E');
  border: 1px dashed #555;
  padding: 3px;
}

/* Common Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');