/* Reset, tipografie și layout de bază. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg-0);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-0) linear-gradient(180deg, #0a1628, var(--bg-0) 600px);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; outline: none; }

h1, h2, h3 {
  margin: 0;
  color: var(--text-0);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: var(--text-lg); }

p { margin: 0; max-width: 68ch; }
a { color: var(--gold-300); text-underline-offset: 3px; }
a:hover { color: var(--text-0); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.container {
  width: min(100% - 2 * var(--space-4), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--space-12); }
@media (min-width: 768px) {
  .section { padding-block: var(--space-16); }
}
.section-green { background: var(--green-700); }
.section-red { background: var(--red-700); }
.section-green .card, .section-red .card { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
.section-green .card p, .section-red .card p, .section-green .section-head p, .section-red .section-head p { color: rgba(255, 250, 240, 0.85); }
.section-head { margin-bottom: var(--space-8); }
.section-head p { margin-top: var(--space-3); color: var(--text-2); }

.muted { color: var(--text-2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--gold-500);
  color: #2a1a00;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }