/* Base layer — reset, body atmosphere, generic element styling.
 * Loaded after themes (which declare tokens) and before components.
 * No selector here references a specific component. If a rule applies
 * only inside `.topbar` or `.card`, it belongs in components/.
 */

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Ambient gradient atmosphere — gold upper-right, slate lower-left.
   Fixed so the page reads as one composition. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 1100px 700px at 80% -10%, rgba(var(--accent-rgb), 0.12), transparent 55%),
    radial-gradient(ellipse 900px 700px at 5% 110%, rgba(var(--slate-rgb), 0.14), transparent 55%);
  z-index: 0;
  pointer-events: none;
}

/* Subtle scanline texture for that "I'm in a terminal" feel. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  z-index: 0;
  pointer-events: none;
}

/* Generic typography + links + inline code. Form/button defaults live
   in components/card.css (the only place we ship inputs today). */
h1 { margin: 0 0 16px; font-size: 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }

code {
  background: rgba(31, 38, 48, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-mono);
  color: var(--accent);
}

form.inline { display: inline; }