/* ESPELHO de tokens.js — NÃO edite um valor aqui sem editar lá (tests/tokens.test.js acusa).
   Fonte única e racional: docs/superpowers/specs/2026-07-20-skeuomorfismo-completo-design.md */
:root {
  --navy: #0D2137;
  --teal: #0E7490;
  --copper: #B45309;
  --paper: #eef3f6;
  --ink: #0D2137;
  --tx-2: #44617a;
  --tx-mute: #64748b;
  --bd-input: #cdd9e1;
  --ok: #16a34a;
  --err: #b91c1c;
  --warn: #f59e0b;
  --special: #7c3aed;
  --bevel-hi: rgba(255,255,255,.55);
  --bevel-lo: rgba(13,33,55,.32);
  --elev-1: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(13,33,55,.20);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(13,33,55,.12), 0 10px 24px rgba(13,33,55,.20);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 50px rgba(0,0,0,.35), 0 2px 8px rgba(13,33,55,.20);
  --well: inset 0 2px 6px rgba(13,33,55,.22), inset 0 1px 2px rgba(13,33,55,.14);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --metal: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.10) 1px 2px, rgba(255,255,255,.04) 2px 3px), linear-gradient(180deg, #1d4266 0%, #12304c 45%, #0D2137 75%, #081525 100%);
  --copper-metal: linear-gradient(180deg, #d97b1e 0%, #cf701a 18%, #B45309 40%, #a04a08 55%, #B45309 70%, #c2620f 88%, #8f4207 100%);
  --glass: radial-gradient(ellipse 90% 45% at 50% -5%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 70%);
  --gap-1: 6px;
  --gap-2: 8px;
  --gap-3: 10px;
  --gap-4: 12px;
  --gap-5: 14px;
  --r-input: 6px;
  --r-btn: 8px;
  --r-card: 12px;
  --r-modal: 14px;
  --focus-ring: 0 0 0 3px rgba(14,116,144,.15);
}

/* Tema escuro do PAINEL e do BLOCO (spec 2026-10-01-tema-escuro-completo; por lugar desde a spec
   2026-10-03-tema-por-superficie) — ESPELHO de NeuroTokens.escuro.
   Só em tela: imprimir a página com o escuro ligado sai no claro. Quem liga html.dark: o painel
   (applyDark, pelo TemaPref.conecta do initDark) e o Bloco (TemaPref.conecta do bloco.js), cada um
   pelo seu lugar no `iccod_tema`; popup.html nunca. */
@media screen {
  html.dark {
    --navy: #e0e9f4;
    --teal: #66bcda;
    --copper: #f09460;
    --paper: #071523;
    --ink: #e0e9f4;
    --tx-2: #bed0e0;
    --tx-mute: #b4c1d4;
    --bd-input: #425263;
    --ok: #73ca85;
    --err: #f68d80;
    --warn: #f5b05b;
    --special: #b19ef9;
    --bevel-hi: rgba(255,255,255,.07);
    --bevel-lo: rgba(0,0,0,.45);
    --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.45);
    --elev-2: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.45);
    --elev-3: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 50px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.45);
    --well: inset 0 2px 6px rgba(0,0,0,.50), inset 0 1px 2px rgba(0,0,0,.40);
    --grain: none;
    --metal: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.12) 1px 2px, rgba(255,255,255,.015) 2px 3px), linear-gradient(180deg, #16314d 0%, #0e2238 45%, #0a1a2c 75%, #06111d 100%);
    --copper-metal: linear-gradient(180deg, #d97b1e 0%, #cf701a 18%, #B45309 40%, #a04a08 55%, #B45309 70%, #c2620f 88%, #8f4207 100%);
    --glass: radial-gradient(ellipse 90% 45% at 50% -5%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 70%);
    --focus-ring: 0 0 0 3px rgba(102,188,218,.35);
  }
}