* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* ── SELEÇÃO DE TEXTO — segue o tema ativo ── */
::selection {
  background-color: color-mix(in srgb, var(--primary) 28%, transparent);
  color: inherit;
}

/* ── CAMADA DE AQUARELA GLOBAL ── */
#watercolor-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Manchas de aquarela irregulares — simulam tinta diluída no papel */
  background:
    radial-gradient(ellipse 70% 50% at 2% 3%,   rgba(210,160,85,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 50% 65% at 98% 6%,   rgba(185,130,70,0.13) 0%, transparent 58%),
    radial-gradient(ellipse 60% 40% at 88% 96%,  rgba(175,128,68,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 6%  92%,  rgba(200,150,80,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 48% 52%,  rgba(220,175,105,0.07) 0%, transparent 68%),
    radial-gradient(ellipse 28% 38% at 25% 62%,  rgba(195,148,78,0.09) 0%, transparent 52%),
    radial-gradient(ellipse 40% 28% at 72% 35%,  rgba(180,135,72,0.08) 0%, transparent 55%);
  mix-blend-mode: multiply;
}

/* Grain de papel — fibra de aquarela */
#watercolor-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.048;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}