/* =============================
   Base Global Styles
   ============================= */

:root {
  /* Colors */
  --color-bg: #0b0b0b;
  --color-bg-light: #121212;
  --color-text: #eaeaea;
  --color-accent: #00bcd4;
  --color-accent-hover: #00a0b8;
  --color-border: #222;
  --color-muted: #aaa;

  /* Typography */
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --fs-h1: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 3.5vw, 2rem);
  --fs-h4: 1.25rem;
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* =============================
   Reset & Base
   ============================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* =============================
   Typography
   ============================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

small {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* =============================
   Links
   ============================= */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover, a:focus-visible {
  color: var(--color-accent-hover);
  outline: none;
}

/* =============================
   Lists
   ============================= */

ul, ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

/* =============================
   Images
   ============================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================
   Utility Classes
   ============================= */

.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: var(--space-lg); }