/* =========================================================================
   base.css — Tokens de cor, reset e tipografia.
   O tema e trocado pelo atributo data-tema no elemento <html>.
   ========================================================================= */

:root {
  /* Tipografia: apenas fontes do sistema, nada de rede. */
  --fonte: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
           "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;

  --t-micro: 10px;
  --t-mini: 11px;
  --t-peq: 12px;
  --t-base: 14px;
  --t-med: 16px;
  --t-grande: 22px;
  --t-display: 32px;

  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  --borda-raio: 2px;
  --transicao: 120ms linear;
}

/* --------------------------------------------------------- tema escuro */
:root,
:root[data-tema="escuro"] {
  --fundo: #050705;
  --painel: #0A0E0B;
  --painel-alto: #121812;
  --painel-fundo: #030403;

  --linha: #253026;
  --linha-forte: #435145;
  --linha-luz: #5C6B5E;

  --texto: #E6EDE7;
  --texto-suave: #93A195;
  --texto-fraco: #61705F;

  --verde: #3BFF9E;
  --verde-fosco: #1E8E58;
  --verde-vidro: rgba(59, 255, 158, 0.10);
  --ciano: #4DE1FF;
  --ambar: #FFD75E;
  --vermelho: #FF5C5C;
  --violeta: #B07CFF;

  --icone: #C9CFC9;
  --icone-detalhe: #4DE1FF;

  --grade: rgba(200, 220, 205, 0.16);
  --grade-forte: rgba(200, 220, 205, 0.34);
  --marca-erro: #000000;

  --sombra-baixo: inset -1px -1px 0 #000000;
  --sombra-alto: inset 1px 1px 0 var(--linha-luz);
  --scan: rgba(255, 255, 255, 0.022);
}

/* ---------------------------------------------------------- tema claro */
:root[data-tema="claro"] {
  --fundo: #F2F4F1;
  --painel: #FFFFFF;
  --painel-alto: #E9EDE8;
  --painel-fundo: #FBFCFA;

  --linha: #C3CCC2;
  --linha-forte: #8E9A8D;
  --linha-luz: #FFFFFF;

  --texto: #0C120D;
  --texto-suave: #46514600;
  --texto-suave: #465146;
  --texto-fraco: #6E7A6E;

  --verde: #067A42;
  --verde-fosco: #0B9E57;
  --verde-vidro: rgba(6, 122, 66, 0.10);
  --ciano: #0C6E8C;
  --ambar: #8A6100;
  --vermelho: #B3231F;
  --violeta: #5B34A8;

  --icone: #566056;
  --icone-detalhe: #0C6E8C;

  --grade: rgba(20, 40, 25, 0.20);
  --grade-forte: rgba(20, 40, 25, 0.42);
  --marca-erro: #B3231F;

  --sombra-baixo: inset -1px -1px 0 #B4BEB3;
  --sombra-alto: inset 1px 1px 0 #FFFFFF;
  --scan: rgba(0, 0, 0, 0.018);
}

/* ------------------------------------------------------------- reset */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  /* Impede o zoom por duplo toque atrapalhar o grid no tablet. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

/* Textura sutil de varredura, so no tema escuro. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(
    to bottom,
    var(--scan) 0 1px,
    transparent 1px 3px
  );
}
:root[data-efeitos="off"] body::after { display: none; }

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: var(--ciano); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 1px;
}

.oculto { display: none !important; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}