/* Tokens de design (skill ui-design-system, adaptados ao tema denso grafite). Carregado antes de style.css.
   Componentes usam SÓ os papéis (--bg, --panel, --text, --primary...), nunca os valores crus.
   Escuro é o padrão; o claro vem de prefers-color-scheme com os mesmos papéis pareados. */

/* Fontes hospedadas aqui (IBM Plex, licença OFL em /fonts/OFL-LICENSE.txt). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark light;

  /* Papéis: tema grafite (padrão) */
  --bg:#0d1015; --side:#0b0e12; --panel:#141920; --surface:var(--panel); --surface-2:#1b2431;
  --border:#222a34; --border-soft:#1c232d; --border-strong:#2c3644; --border-control:#6b7788;
  --field:#0f141a;
  --text:#e7ebf0; --text-muted:#8c97a6; --text-soft:#b6c0cd;
  --primary:#6ea8fe; --primary-hover:#8dbbff; --on-primary:#08121f; --primary-soft:#182235;
  --link:#7db4ff;
  --success:#4cc38a; --success-soft:#112a20;
  --warning:#e3b04b; --warning-soft:#2a2110; --warning-line:#5a4617; --warning-text:#f0ce86;
  --danger:#f2766b;  --danger-soft:#3a1714; --on-danger:#2a0b08;
  --focus:#9cc2ff;
  --skeleton:#1b2431;
  --overlay:rgb(0 0 0 / .6);
  --hover:#171d25; --selected:#182130;
  --chart-1:var(--primary); --chart-2:var(--success);
  --shadow-1:0 1px 2px rgb(0 0 0 / .4);
  --shadow-2:0 8px 24px rgb(0 0 0 / .5);
  --shadow-preview:0 24px 70px rgb(0 0 0 / .55);

  /* Tipografia */
  --font-sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.875rem; --text-md:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-input:1rem;
  --leading-tight:1.25; --leading:1.45;
  --weight-regular:400; --weight-medium:500; --weight-bold:600;

  /* Espaço (base 4px) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem;

  /* Forma */
  --radius-sm:.25rem; --radius:.5rem; --radius-lg:.75rem; --radius-full:999px;
  --border-w:1px; --border-w-2:2px;

  /* Layout / interação */
  --tap:2.75rem; --content-max:90rem; --nav-h:4rem; --sidebar-w:14.5rem;
  --thumb:2.25rem; --icon:1.125rem; --icon-lg:1.375rem; --field-max:28rem;
  --kpi-spark-w:6rem; --kpi-spark-h:1.875rem; --chart-min:21rem;
  --preview-card:32.5rem; --preview-side:20rem; --ring:2.5rem;
  --ease:cubic-bezier(.2,0,0,1); --ease-reveal:cubic-bezier(.22,.75,.2,1); --dur:150ms; --dur-reveal:650ms;
}

@media (min-width: 60em) and (pointer: fine) {
  :root { --tap:2.25rem; --text-input:.875rem; }
}

/* Tema claro: mesmos papéis, cores pareadas (contraste de texto >= 4,5:1) */
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f3f5f8; --side:#ffffff; --panel:#ffffff; --surface-2:#eaeef3;
    --border:#d9dfe7; --border-soft:#e6eaf0; --border-strong:#c3ccd8; --border-control:#6b7788;
    --field:#ffffff;
    --text:#14181f; --text-muted:#566170; --text-soft:#38424f;
    --primary:#1d5fd0; --primary-hover:#174fb0; --on-primary:#ffffff; --primary-soft:#e4edfc;
    --link:#1750b4;
    --success:#17703f; --success-soft:#e1f3e9;
    --warning:#7a4f00; --warning-soft:#fbf1dc; --warning-line:#e0c07a; --warning-text:#5e3d00;
    --danger:#b42318;  --danger-soft:#fce9e7; --on-danger:#ffffff;
    --focus:#0b57d0;
    --skeleton:#e3e8ee;
    --overlay:rgb(16 24 40 / .45);
    --hover:#eef1f5; --selected:#e8eefa;
    --shadow-1:0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
    --shadow-2:0 4px 8px rgb(16 24 40 / .08), 0 12px 24px rgb(16 24 40 / .10);
    --shadow-preview:0 24px 60px rgb(16 24 40 / .22);
  }
}

@media (prefers-reduced-motion: reduce) { :root { --dur:0ms; --dur-reveal:0ms; } }

body { background:var(--bg); color:var(--text); font:var(--text-base)/var(--leading) var(--font-sans); }
.num, td.num, .mono { font-family:var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }