/* theme.css — design tokens, typography, base surfaces */

:root {
  /* surfaces */
  --bg: #07070a;
  --bg-soft: #0d0d13;
  --panel: #121218;
  --panel-2: #17171f;
  --line: #2a2a34;
  --line-hot: #4a1f1f;

  /* ink */
  --bone: #ece7db;
  --bone-dim: #a8a296;
  --bone-faint: #6d6862;

  /* accents (evil palette — no purple, no blue) */
  --red: #ff2f2f;
  --red-deep: #b30606;
  --orange: #ff7a18;
  --amber: #ffc247;
  --green: #7bff4d;
  --focus: #ffc247;

  /* type */
  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-body: "VT323", "Lucida Console", monospace;

  /* metrics */
  --shell: 1180px;
  --radius: 2px;
  --gap: 1.25rem;

  /* glow */
  --glow-red: 0 0 12px rgba(255, 47, 47, 0.55), 0 0 34px rgba(255, 47, 47, 0.22);
  --glow-amber: 0 0 10px rgba(255, 194, 71, 0.5);
}

body {
  background-color: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  letter-spacing: 0.02em;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 122, 24, 0.07), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(255, 47, 47, 0.09), transparent 50%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 0.9rem + 3.1vw, 3.4rem);
}

h2 {
  font-size: clamp(1.15rem, 0.8rem + 2vw, 2.2rem);
}

h3 {
  font-size: clamp(0.8rem, 0.62rem + 0.9vw, 1.05rem);
}

p {
  text-wrap: pretty;
  color: var(--bone-dim);
}

strong {
  color: var(--bone);
  font-weight: 400;
  text-shadow: var(--glow-amber);
}

::selection {
  background: var(--red);
  color: #fff;
}

/* icon sizing */
.icon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  flex: 0 0 auto;
}

/* the inline svg sprite never renders itself */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--amber);
  color: #100c04;
  font-family: var(--font-display);
  font-size: 0.7rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.noscript {
  margin: 2rem auto;
  max-width: 60ch;
  padding: 1rem;
  border: 2px solid var(--amber);
  color: var(--amber);
  text-align: center;
}

/*
 * Display words that may be long. These only break when they genuinely
 * cannot fit, and the hero title is sized to always fit on one line.
 */
.section__title,
.brand__name,
.dialog__title {
  overflow-wrap: anywhere;
}