/* base.css - estilos globais */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--p);
  color: var(--text-0);
  background: radial-gradient(1200px 700px at 20% 10%, rgba(167, 139, 250, 0.16), transparent 60%),
              radial-gradient(1100px 600px at 80% 0%, rgba(34, 211, 238, 0.12), transparent 55%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-0));
}

.container {
  width: min(var(--container-max), 100%);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--space-3) 0;
}

.section--tight {
  padding: var(--space-6) 0;
}

.muted { color: var(--text-1); }
.small { font-size: var(--small); color: var(--text-2); }

h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.2px;
}

h1 { font-size: var(--h1); line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.15; }
h3 { font-size: var(--h3); line-height: 1.25; font-family: var(--font-body); }

.hr {
  height: 1px;
  background: var(--stroke);
  border: 0;
  margin: var(--space-6) 0;
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--stroke);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-1);
}