/* ── Tokens ── */
:root {
  --bg:          #f5f2e9;
  --paper:       #fffdf7;
  --ink:         #1c352e;
  --ink-soft:    #4c5e57;
  --line:        #ddd6c3;
  --border:      #e6e0cf;
  --accent:      #d4663a;
  --accent-deep: #b8492440;
  --teal:        #2c6b5a;
  --teal-soft:   #2c6b5a18;
  --success:     #33784f;
  --success-bg:  #33784f14;
  --error:       #b53e26;
  --error-bg:    #b53e2614;
  --warn:        #a9761f;
  --warn-bg:     #a9761f14;
  --shadow:      0 1px 2px rgba(28,53,46,.05), 0 12px 32px -16px rgba(28,53,46,.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Hanken Grotesk', sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 120% at 12% -10%, #fbf8f0 0%, transparent 45%),
    radial-gradient(130% 130% at 100% 0%, #eef4ee 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Linhas de contorno topográfico de fundo */
.topo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .5;
}
.topo svg {
  position: absolute;
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
}
.topo path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.1;
}