/* ==========================================================================
   NEXT — Camada de Design Tokens

   TEMA CLARO É O PADRÃO, conforme o mockup de referência aprovado.
   O tema escuro fica disponível em [data-theme="dark"] e pelo botão da topbar.

   Isto resolve a divergência entre os dois insumos do projeto: a tabela §2.1
   da spec define superfícies escuras (#0F172A), enquanto o showcase mostra
   uma interface clara. Vale o mockup; os valores escuros viraram o tema
   alternativo, sem perder nada.

   DESVIOS DELIBERADOS DA SPEC (medidos em ACESSIBILIDADE.md):
   a paleta da spec falha a própria meta WCAG 2.1 AA em 4 pontos, porque trata
   cada cor como fill E como texto. Aqui cada cor tem token de FILL e token de
   TEXTO-SOBRE-SUPERFÍCIE separados. A identidade da marca (#059669) é
   preservada integralmente nos fills, logo e gráficos.

   Verifique com: php _ferramentas/contraste.php
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     1. PALETA BRUTA (primitivos — não usar direto em componente)
     --------------------------------------------------------------------- */
  --nx-emerald-50:  #ecfdf5;
  --nx-emerald-100: #d1fae5;
  --nx-emerald-300: #6ee7b7;
  --nx-emerald-400: #34d399;
  --nx-emerald-500: #10b981;
  --nx-emerald-600: #059669;  /* verde institucional da marca */
  --nx-emerald-700: #047857;
  --nx-emerald-800: #065f46;

  --nx-sky-50:  #e0f2fe;
  --nx-sky-300: #7dd3fc;
  --nx-sky-400: #38bdf8;
  --nx-sky-500: #0ea5e9;
  --nx-sky-700: #0369a1;

  --nx-amber-50:  #fffbeb;
  --nx-amber-300: #fcd34d;
  --nx-amber-400: #fbbf24;
  --nx-amber-500: #f59e0b;
  --nx-amber-700: #b45309;

  --nx-red-50:  #fef2f2;
  --nx-red-300: #fca5a5;
  --nx-red-400: #f87171;
  --nx-red-500: #ef4444;
  --nx-red-700: #b91c1c;

  --nx-slate-50:  #f8fafc;
  --nx-slate-100: #f1f5f9;
  --nx-slate-200: #e2e8f0;
  --nx-slate-300: #cbd5e1;
  --nx-slate-400: #94a3b8;
  --nx-slate-500: #64748b;
  --nx-slate-600: #475569;
  --nx-slate-700: #334155;
  --nx-slate-800: #1e293b;
  --nx-slate-900: #0f172a;
  --nx-slate-950: #020617;

  --nx-white: #ffffff;

  /* ---------------------------------------------------------------------
     2. TOKENS SEMÂNTICOS — TEMA CLARO (padrão)
     --------------------------------------------------------------------- */

  /* Superfícies */
  --nx-surface-base:    var(--nx-slate-50);    /* fundo da aplicação  */
  --nx-surface-card:    var(--nx-white);       /* cards, sidebar      */
  --nx-surface-raised:  var(--nx-slate-100);   /* hover, faixas       */
  --nx-surface-sunken:  var(--nx-slate-100);   /* cabeçalho de tabela */
  --nx-surface-overlay: rgb(15 23 42 / 45%);

  /* Bordas — separadas por função.
     -subtle é decorativa (isenta de 1.4.11).
     -default carrega estrutura (contorno de input, divisória) e precisa
     de >= 3:1 contra a superfície. */
  --nx-border-subtle:   var(--nx-slate-200);   /* 1.18:1 — decorativa  */
  --nx-border-default:  var(--nx-slate-500);   /* 4.76:1 — passa 1.4.11 */
  --nx-border-strong:   var(--nx-slate-600);   /* 7.58:1                */

  /* Texto */
  --nx-text-primary:    var(--nx-slate-900);   /* 17.85:1 em branco */
  --nx-text-secondary:  var(--nx-slate-600);   /*  7.58:1 em branco */
  --nx-text-disabled:   var(--nx-slate-400);
  --nx-text-inverse:    var(--nx-white);

  /* Marca — FILL vs TEXTO.
     O fill da spec (#059669) só dá 3.77:1 com texto branco. O fill passa a
     ser emerald-700 (5.48:1); emerald-600 segue como identidade em logo,
     gráficos e faixas grandes, que são isentos de 4.5:1. */
  --nx-brand-fill:        var(--nx-emerald-700);
  --nx-brand-fill-hover:  var(--nx-emerald-800);
  --nx-brand-fill-active: #054e37;
  --nx-brand-identity:    var(--nx-emerald-600);  /* logo, gráfico, faixa */
  --nx-brand-on-fill:     var(--nx-white);        /* 5.48:1 */
  --nx-brand-text:        var(--nx-emerald-700);  /* 5.48:1 */
  --nx-brand-surface:     var(--nx-emerald-50);

  /* Acento (contratos, séries de gráfico) */
  --nx-accent-fill:     var(--nx-sky-700);
  --nx-accent-text:     var(--nx-sky-700);        /* 5.93:1 */
  --nx-accent-identity: var(--nx-sky-500);
  --nx-accent-surface:  var(--nx-sky-50);

  /* Estados */
  --nx-success-fill:    var(--nx-emerald-700);
  --nx-success-text:    var(--nx-emerald-700);    /* 5.21:1 no chip */
  --nx-success-surface: var(--nx-emerald-50);

  --nx-warning-fill:    var(--nx-amber-700);
  --nx-warning-text:    var(--nx-amber-700);      /* 4.84:1 no chip */
  --nx-warning-surface: var(--nx-amber-50);

  --nx-danger-fill:     var(--nx-red-700);
  --nx-danger-text:     var(--nx-red-700);        /* 5.91:1 no chip */
  --nx-danger-surface:  var(--nx-red-50);

  --nx-info-fill:       var(--nx-sky-700);
  --nx-info-text:       var(--nx-sky-700);
  --nx-info-surface:    var(--nx-sky-50);

  /* Gráficos — preenchimento de área suave, como no mockup */
  --nx-chart-line:      var(--nx-emerald-600);
  --nx-chart-fill-from: rgb(5 150 105 / 28%);
  --nx-chart-fill-to:   rgb(5 150 105 / 0%);
  --nx-chart-grid:      var(--nx-slate-200);
  --nx-chart-axis:      var(--nx-slate-400);
  --nx-chart-alt:       var(--nx-sky-700);

  /* Foco — visível nos dois temas, nunca removido */
  --nx-focus-ring:        var(--nx-sky-700);
  --nx-focus-ring-width:  2px;
  --nx-focus-ring-offset: 2px;

  /* ---------------------------------------------------------------------
     3. TIPOGRAFIA (spec §2.2)
     --------------------------------------------------------------------- */
  --nx-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  --nx-text-display: 700 1.75rem/2.125rem var(--nx-font-sans); /* 28/34 */
  --nx-text-h2:      600 1.25rem/1.625rem var(--nx-font-sans); /* 20/26 */
  --nx-text-h3:      500 1rem/1.375rem     var(--nx-font-sans); /* 16/22 */
  --nx-text-body:    400 0.875rem/1.25rem  var(--nx-font-sans); /* 14/20 */
  --nx-text-caption: 400 0.75rem/1rem      var(--nx-font-sans); /* 12/16 */

  --nx-weight-regular:  400;
  --nx-weight-medium:   500;
  --nx-weight-semibold: 600;
  --nx-weight-bold:     700;

  /* ---------------------------------------------------------------------
     4. ESPAÇAMENTO E GRID (spec §2.3)
     --------------------------------------------------------------------- */
  --nx-space-2xs: 2px;
  --nx-space-xs:  4px;
  --nx-space-sm:  8px;
  --nx-space-md:  16px;
  --nx-space-lg:  24px;
  --nx-space-xl:  32px;
  --nx-space-2xl: 48px;
  --nx-space-3xl: 64px;

  --nx-container-max: 1280px;
  --nx-sidebar-width: 240px;
  --nx-topbar-height: 64px;

  /* ---------------------------------------------------------------------
     5. RAIO, ELEVAÇÃO, MOVIMENTO
     --------------------------------------------------------------------- */
  --nx-radius-sm:   6px;
  --nx-radius-md:   8px;   /* inputs e botões (spec) */
  --nx-radius-lg:   12px;  /* cards (spec)           */
  --nx-radius-xl:   16px;
  --nx-radius-full: 9999px;

  --nx-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --nx-shadow-md: 0 4px 12px rgb(15 23 42 / 8%);
  --nx-shadow-lg: 0 12px 32px rgb(15 23 42 / 12%);

  --nx-duration-fast: 120ms;
  --nx-duration-base: 200ms;
  --nx-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --nx-z-dropdown: 1000;
  --nx-z-sticky:   1020;
  --nx-z-overlay:  1040;
  --nx-z-modal:    1050;
  --nx-z-toast:    1080;
}

/* ==========================================================================
   TEMA ESCURO — os valores da §2.1 da spec, agora como alternativa
   ========================================================================== */
:root[data-theme='dark'] {
  color-scheme: dark;

  --nx-surface-base:    var(--nx-slate-900);   /* #0F172A, spec */
  --nx-surface-card:    var(--nx-slate-800);   /* #1E293B, spec */
  --nx-surface-raised:  #243449;
  --nx-surface-sunken:  var(--nx-slate-950);
  --nx-surface-overlay: rgb(2 6 23 / 72%);

  --nx-border-subtle:   var(--nx-slate-700);   /* 1.41:1 — decorativa   */
  --nx-border-default:  var(--nx-slate-500);   /* 3.07:1 — passa 1.4.11 */
  --nx-border-strong:   var(--nx-slate-400);   /* 5.71:1                */

  --nx-text-primary:    var(--nx-slate-50);    /* 13.98:1 em card */
  --nx-text-secondary:  var(--nx-slate-400);   /*  5.71:1 em card */
  --nx-text-disabled:   var(--nx-slate-500);
  --nx-text-inverse:    var(--nx-slate-900);

  --nx-brand-text:      var(--nx-emerald-400); /* 7.61:1 */
  --nx-brand-surface:   rgb(5 150 105 / 16%);

  --nx-accent-text:     var(--nx-sky-400);     /* 6.83:1 */
  --nx-accent-surface:  rgb(14 165 233 / 16%);

  --nx-success-text:    var(--nx-emerald-400); /* 7.61:1 */
  --nx-success-surface: rgb(16 185 129 / 16%);

  --nx-warning-text:    var(--nx-amber-400);   /* 8.76:1 */
  --nx-warning-surface: rgb(245 158 11 / 16%);

  --nx-danger-text:     var(--nx-red-400);     /* 5.29:1 */
  --nx-danger-surface:  rgb(239 68 68 / 16%);

  --nx-info-text:       var(--nx-sky-400);
  --nx-info-surface:    rgb(14 165 233 / 16%);

  --nx-chart-grid:      var(--nx-slate-700);
  --nx-chart-axis:      var(--nx-slate-500);
  --nx-chart-line:      var(--nx-emerald-400);
  --nx-chart-fill-from: rgb(52 211 153 / 26%);
  --nx-chart-fill-to:   rgb(52 211 153 / 0%);
  --nx-chart-alt:       var(--nx-sky-400);

  --nx-focus-ring:      var(--nx-sky-400);

  --nx-shadow-sm: 0 1px 2px rgb(2 6 23 / 40%);
  --nx-shadow-md: 0 4px 12px rgb(2 6 23 / 45%);
  --nx-shadow-lg: 0 12px 32px rgb(2 6 23 / 55%);
}

/* Segue a preferência do SO só quando o usuário não escolheu explicitamente */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    color-scheme: dark;
    --nx-surface-base:    var(--nx-slate-900);
    --nx-surface-card:    var(--nx-slate-800);
    --nx-surface-raised:  #243449;
    --nx-surface-sunken:  var(--nx-slate-950);
    --nx-surface-overlay: rgb(2 6 23 / 72%);
    --nx-border-subtle:   var(--nx-slate-700);
    --nx-border-default:  var(--nx-slate-500);
    --nx-border-strong:   var(--nx-slate-400);
    --nx-text-primary:    var(--nx-slate-50);
    --nx-text-secondary:  var(--nx-slate-400);
    --nx-text-disabled:   var(--nx-slate-500);
    --nx-text-inverse:    var(--nx-slate-900);
    --nx-brand-text:      var(--nx-emerald-400);
    --nx-brand-surface:   rgb(5 150 105 / 16%);
    --nx-accent-text:     var(--nx-sky-400);
    --nx-accent-surface:  rgb(14 165 233 / 16%);
    --nx-success-text:    var(--nx-emerald-400);
    --nx-success-surface: rgb(16 185 129 / 16%);
    --nx-warning-text:    var(--nx-amber-400);
    --nx-warning-surface: rgb(245 158 11 / 16%);
    --nx-danger-text:     var(--nx-red-400);
    --nx-danger-surface:  rgb(239 68 68 / 16%);
    --nx-info-text:       var(--nx-sky-400);
    --nx-info-surface:    rgb(14 165 233 / 16%);
    --nx-chart-grid:      var(--nx-slate-700);
    --nx-chart-axis:      var(--nx-slate-500);
    --nx-chart-line:      var(--nx-emerald-400);
    --nx-chart-fill-from: rgb(52 211 153 / 26%);
    --nx-chart-fill-to:   rgb(52 211 153 / 0%);
    --nx-chart-alt:       var(--nx-sky-400);
    --nx-focus-ring:      var(--nx-sky-400);
    --nx-shadow-sm: 0 1px 2px rgb(2 6 23 / 40%);
    --nx-shadow-md: 0 4px 12px rgb(2 6 23 / 45%);
    --nx-shadow-lg: 0 12px 32px rgb(2 6 23 / 55%);
  }
}

/* ==========================================================================
   RESET MÍNIMO E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body.nx {
  margin: 0;
  font: var(--nx-text-body);
  color: var(--nx-text-primary);
  background-color: var(--nx-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nx h1, .nx h2, .nx h3, .nx h4 { margin: 0 0 var(--nx-space-sm); }
.nx h1 { font: var(--nx-text-display); }
.nx h2 { font: var(--nx-text-h2); }
.nx h3 { font: var(--nx-text-h3); }
.nx p  { margin: 0 0 var(--nx-space-md); }

.nx img,
.nx svg { max-width: 100%; }

.nx a {
  color: var(--nx-accent-text);
  text-decoration: none;
}
.nx a:hover { text-decoration: underline; }

/* Foco visível e consistente. Nunca use outline:none sem substituto. */
.nx :focus-visible {
  outline: var(--nx-focus-ring-width) solid var(--nx-focus-ring);
  outline-offset: var(--nx-focus-ring-offset);
  border-radius: var(--nx-radius-sm);
}

/* Dígitos financeiros alinhados em coluna (spec §2.2) */
.nx-numeric,
.nx td.nx-numeric,
.nx .nx-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Conteúdo só para leitor de tela */
.nx-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;
}

/* Pular para o conteúdo — primeiro item tabulável da página */
.nx-skip-link {
  position: absolute;
  top: var(--nx-space-sm);
  left: var(--nx-space-sm);
  z-index: var(--nx-z-toast);
  padding: var(--nx-space-sm) var(--nx-space-md);
  color: var(--nx-brand-on-fill);
  background: var(--nx-brand-fill);
  border-radius: var(--nx-radius-md);
  transform: translateY(-200%);
  transition: transform var(--nx-duration-fast) var(--nx-ease);
}
.nx-skip-link:focus { transform: translateY(0); }

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