/* SCX · BASES FIXAS (design system)
   Duas bases, nada mais. Nunca preto puro, nunca branco puro.
   Cada seção = 1 base + 1 textura (limpa, grão ou grade). */
:root{
  --scx-ink:#131313;      /* cinza-escuro: o fundo dos vídeos cinéticos */
  --scx-paper:#FAFAF7;    /* creme: branco levemente quente */
  --scx-line-on-ink:rgba(255,255,255,.14);
  --scx-line-on-paper:rgba(19,19,19,.13);
  --scx-grid-on-ink:rgba(255,255,255,.07);
  --scx-grid-on-paper:rgba(19,19,19,.06);
  --scx-grid-size:60px;
}
.base-ink{background:var(--scx-ink);color:#fff;position:relative}
.base-paper{background:var(--scx-paper);color:var(--scx-ink);position:relative}

/* textura 1 · GRÃO (8% no escuro, 6% no creme) */
.tx-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.base-paper.tx-grain::after{mix-blend-mode:multiply;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* textura 2 · GRADE (quadrados de 60 px, quase invisível) */
.tx-grid::before{content:"";position:absolute;inset:0;pointer-events:none;background-size:var(--scx-grid-size) var(--scx-grid-size)}
.base-ink.tx-grid::before{background-image:linear-gradient(var(--scx-grid-on-ink) 1px,transparent 1px),linear-gradient(90deg,var(--scx-grid-on-ink) 1px,transparent 1px)}
.base-paper.tx-grid::before{background-image:linear-gradient(var(--scx-grid-on-paper) 1px,transparent 1px),linear-gradient(90deg,var(--scx-grid-on-paper) 1px,transparent 1px)}

/* textura 0 · LIMPA = só a base, sem classe de textura */
/* uso: <section class="base-ink tx-grain tx-grid"> (grão + grade) ou <section class="base-paper"> (limpa) */