/* Fundações (tokens) do painel — copiadas da biblioteca Genesis do Nodum
   (~/Developer/Spam Delet/packages/genesis-ui/src/foundations.css), mesmos nomes --g-*.
   Tema: <html class="light"> é o claro; sem a classe, o escuro (como no Nodum).

   Regras que valem para todo o painel (docs/UI-STANDARDS.md do Nodum):
   - Fonte Arial; tamanhos de texto SÓ 10, 11, 12, 13, 14, 20 e 30 px (use os tokens abaixo).
   - Contraste AA nos dois temas; 4 px mínimo entre botões; números tabulares alinhados à direita. */

:root {
  --g-accent: #d4ff00;
  --g-accent-rgb: 212 255 0;
  --g-on-accent: #141800;
  --g-font-sans: Arial, sans-serif;
  --g-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --g-space-4: 4px;
  --g-space-8: 8px;
  --g-space-12: 12px;
  --g-space-16: 16px;
  --g-space-24: 24px;
  --g-space-32: 32px;

  --g-radius-8: 8px;
  --g-radius-12: 12px;
  --g-radius-16: 16px;
  --g-radius-28: 28px;

  --g-height-micro: 28px;
  --g-height-compact: 38px;
  --g-height-primary: 48px;
  --g-height-referenceControl: 36px;
  --g-height-field: 42px;

  --g-icon-support: 14px;
  --g-icon-control: 18px;
  --g-icon-emphasis: 20px;

  --g-geometry-controlRadius: 10px;
  --g-geometry-switchWidth: 40px;
  --g-geometry-switchHeight: 22px;
  --g-geometry-switchThumb: 16px;
  --g-geometry-focusWidth: 2px;
  --g-geometry-focusOffset: 3px;

  --g-danger: #e43d32;
  --g-dangerHover: #d83228;
  --g-success: #22c55e;
  --g-warning: #f2b53b;

  /* Escala tipográfica: os únicos tamanhos permitidos. */
  --g-size-10: 10px;
  --g-size-11: 11px;
  --g-size-12: 12px;
  --g-size-13: 13px;
  --g-size-14: 14px;
  --g-size-20: 20px;
  --g-size-30: 30px;

  --g-type-display-size: 30px;
  --g-type-display-line: 36px;
  --g-type-display-weight: 500;
  --g-type-display-tracking: -1px;
  --g-type-title-size: 20px;
  --g-type-title-line: 26px;
  --g-type-title-weight: 500;
  --g-type-title-tracking: -.4px;
  --g-type-body-size: 14px;
  --g-type-body-line: 22px;
  --g-type-body-weight: 400;
  --g-type-label-size: 10px;
  --g-type-label-line: 14px;
  --g-type-label-weight: 500;
  --g-type-label-tracking: .14em;
  --g-type-numeric-size: 13px;
  --g-type-numeric-line: 18px;
  --g-caption-size: 12px;
  --g-label-small-size: 11px;

  --g-ease-out: ease-out;
  --g-ease-in-out: ease-in-out;
  --g-ease-smooth-out: cubic-bezier(.22, 1, .36, 1);
  --g-ease-bounce: cubic-bezier(.34, 1.36, .64, 1);
  --g-duration-micro: 80ms;
  --g-duration-quick: .15s;
  --g-duration-fast: .25s;
  --g-duration-medium: .35s;
  --g-duration-slow: .4s;
  --g-modal-open-dur: .25s;
  --g-modal-close-dur: .15s;
  --g-panel-open-dur: .4s;
  --g-panel-close-dur: .35s;
  --g-tabs-dur: .25s;
  --g-shimmer-dur: 2s;

  --g-opacity-disabled: .5;
  --g-scale-pressed: .98;
  --g-lift-hover: -1px;
  --g-primary-surface: #202020;
  --g-primary-ink: #fff;
  --g-shadow-thumb: 0 1px 3px #0003;
  --g-shadow-popover: 0 8px 24px #0002;
  --g-control-weight: 600;
}

/* ---------- Tema claro ---------- */
:root.light {
  color-scheme: light;
  --g-page: #fff;
  --g-stage: #fafafa;
  --g-surface: #f4f4f9;
  --g-recess: #e7e7ef;
  --g-ink: #222;
  --g-ink-rgb: 34 34 34;
  --g-secondary: #6e6e76;      /* Nodum usa #85858c; escurecido para 4,9:1 sobre #fafafa (AA) */
  --g-glyph: #75747f;
  --g-line: #ededed;
  --g-line-strong: #dcdce3;
  --g-floating: #fff;
  --g-hover: #f1f1f5;
  --g-control-lift: 0 .5px 1px #0000000d, 0 1px 3px #00000014, inset 0 .5px 0 #ffffffe6;
  --g-accent-ink: #485700;
  --g-status-glass: #ffffff;
  --g-status-glass-rgb: 255 255 255;
  --g-status-success: #147d3d;
  --g-status-danger: #bb273e;
  --g-status-warning: #875a00;
  --g-status-info: #2a69bb;
  --g-backdrop: rgb(0 0 0 / .32);

  /* Cores das séries de gráficos (ordem fixa; AA para marcas de 3:1 sobre o fundo). */
  --g-serie-1: #2a69bb;
  --g-serie-2: #c2410c;
  --g-serie-3: #147d3d;
  --g-serie-4: #7c3aed;
  --g-serie-5: #a16207;
  --g-serie-6: #be185d;
}

/* ---------- Tema escuro ---------- */
:root:not(.light) {
  color-scheme: dark;
  --g-page: #000;
  --g-stage: #111;
  --g-surface: #262626;
  --g-recess: #1b1b1b;
  --g-ink: #efeff1;
  --g-ink-rgb: 239 239 241;
  --g-secondary: #8f8f98;      /* Nodum usa #77777f; clareado para 5,6:1 sobre #111 (AA) */
  --g-glyph: #9b9aa7;
  --g-line: #242424;
  --g-line-strong: #333;
  --g-floating: #202020;
  --g-hover: #262626;
  --g-control-lift: 0 .5px 1px #0006, 0 1.5px 4px #0004, inset 0 .5px 0 #ffffff12;
  --g-accent-ink: #d4ff00;
  --g-status-glass: #000000;
  --g-status-glass-rgb: 0 0 0;
  --g-status-success: #22c55e;
  --g-status-danger: #ff6b7a;
  --g-status-warning: #f2b53b;
  --g-status-info: #6ea8fe;
  --g-backdrop: rgb(0 0 0 / .6);

  --g-serie-1: #6ea8fe;
  --g-serie-2: #fb923c;
  --g-serie-3: #4ade80;
  --g-serie-4: #c4b5fd;
  --g-serie-5: #facc15;
  --g-serie-6: #f472b6;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --g-duration-quick: 0ms;
    --g-duration-fast: 0ms;
    --g-duration-slow: 0ms;
    --g-lift-hover: 0px;
    --g-scale-pressed: 1;
  }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--g-font-sans);
  font-size: var(--g-type-body-size);
  line-height: var(--g-type-body-line);
  color: var(--g-ink);
  background: var(--g-stage);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: var(--g-geometry-focusWidth) solid var(--g-glyph); outline-offset: var(--g-geometry-focusOffset); }
::selection { background: rgb(var(--g-ink-rgb) / .14); }

/* Papéis tipográficos (use estas classes em vez de font-size solto). */
.t-display { font-size: var(--g-type-display-size); line-height: var(--g-type-display-line); font-weight: 500; letter-spacing: var(--g-type-display-tracking); }
.t-titulo { font-size: var(--g-type-title-size); line-height: var(--g-type-title-line); font-weight: 500; letter-spacing: var(--g-type-title-tracking); }
.t-corpo { font-size: var(--g-type-body-size); line-height: var(--g-type-body-line); }
.t-apoio { font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.t-legenda { font-size: var(--g-caption-size); line-height: 16px; }
.t-rotulo { font-size: var(--g-label-small-size); line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.t-micro { font-size: var(--g-type-label-size); line-height: var(--g-type-label-line); }
.t-num { font-variant-numeric: tabular-nums; }
.t-sec { color: var(--g-secondary); }
.t-forte { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }