/* X-Attack! - design tokens & resets */

:root {
  --bg: #0a0a0b;
  --bg-hero: #09090a;
  --panel: #131315;
  --panel-alt: #1a1a1c;
  --border: #29292b;
  --border-strong: #3d3d40;

  --text: #dcdcdd;
  --text-dim: #9a9a9d;
  --text-faint: #6b6b6f;

  --red: #e2231a;
  --red-strong: #ff3b2f;
  --orange: #ff7a1a;
  --yellow: #ffb800;
  --yellow-dim: #cf9700;
  --yellow-green: #b0d136;

  --success: #3fbf6a;
  --error: #ff5c5c;

  --font-display: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius: 2px;
  --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.75);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* The provided hash-texture background: darkened with a fixed overlay so
     long pages of dense charcoal text never fight page content for attention. */
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(7, 7, 8, 0.5) 0%, rgba(7, 7, 8, 0.72) 100%),
    url('/assets/img/bg.webp');
  background-repeat: no-repeat, repeat;
  background-position: top center, top center;
  background-size: cover, 1400px auto;
  background-attachment: fixed, fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 0.6em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
  color: var(--yellow);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, .mono, .hash {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--yellow);
  color: #000;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 24px;
}

img { max-width: 100%; }

/* Sticky footer: main grows to fill any leftover viewport height so the
   footer always sits flush with the bottom of the screen on short pages,
   while still flowing normally after content on long ones. */
main {
  flex: 1 0 auto;
  display: block;
}

/* Small reusable "terminal prompt" accent for section eyebrows */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.eyebrow::before {
  content: '>';
  color: var(--red);
  font-weight: 700;
}