/* ─────────────────────────────────────────────────────────────
   Tokens — papel, tinta e vermelho de impressão (light) / inversão semântica (dark)
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-VF.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic-VF.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-VF.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --serif: "EB Garamond", "Garamond", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* light — predefinição */
  --paper: #F4F4F0;          /* folha off-white, quente */
  --paper-deep: #E9E7DF;     /* mesa por baixo das folhas */
  --ink: #111111;
  --muted: #5E5B55;
  --accent: #990000;         /* vermelho crimson */
  --dim: #CCCCCC;            /* nós inativos */
  --edge-cream: #E8DFC8;
  --edge-red: #7A0000;
  --edge-grey: #D6D4CE;
  --rule: rgba(17, 17, 17, .22);
  --veil: rgba(244, 244, 240, .86);
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -22px rgba(40, 30, 20, .35);

  /* escala fluida 1080p → 4K */
  --s-2: clamp(10px, .55vw + 4px, 20px);
  --s-1: clamp(11px, .6vw + 5px, 23px);
  --s0: clamp(14px, .75vw + 6px, 28px);
  --s1: clamp(17px, .95vw + 7px, 34px);
  --s2: clamp(22px, 1.4vw + 8px, 48px);
  --s3: clamp(30px, 2.4vw + 8px, 84px);
  --gap: clamp(10px, 1vw, 36px);
  --touch: clamp(44px, 2.6vw, 88px);  /* alvo mínimo de toque */
  --panel-w: clamp(340px, 31vw, 1180px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

:root[data-theme="dark"] {
  --paper: #1A1A1A;
  --paper-deep: #0E0E0E;
  --ink: #F4F4F0;
  --muted: #A9A59C;
  --accent: #E63946;
  --dim: #333333;
  --edge-cream: #3A352C;
  --edge-red: #8E1B24;
  --edge-grey: #2A2A2A;
  --rule: rgba(244, 244, 240, .22);
  --veil: rgba(26, 26, 26, .86);
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -22px rgba(0,0,0,.8);
}