/* ============================================================
   tokens.css — fonte de verdade do sistema visual
   ------------------------------------------------------------
   Toda cor, espaçamento, raio, sombra e tamanho de texto do
   sistema nasce aqui. Nenhum outro arquivo deve declarar valor
   cru de cor.

   Ordem de carregamento nas páginas migradas:
     global.css → frontend-redesign.css → tokens.css → ui.css → [página].css

   tokens.css vem depois das duas folhas antigas de propósito:
   ele reconcilia as variáveis que as duas declaravam em paralelo
   (--primary de global.css e --ui-primary de frontend-redesign.css)
   fazendo as duas apontarem para o mesmo valor.
   ============================================================ */

:root {
    /* ---------- superfícies e texto ---------- */
    --t-bg:            #f6f8fb;
    --t-surface:       #ffffff;
    --t-surface-soft:  #f1f5f9;
    --t-surface-sunk:  #eef2f6;
    --t-border:        #e2e8f0;
    --t-border-strong: #cbd5e1;

    --t-text:          #0f172a;
    --t-text-2:        #334155;
    --t-muted:         #64748b;
    --t-muted-2:       #94a3b8;
    --t-on-accent:     #ffffff;

    /* ---------- marca ---------- */
    --t-primary:       #2563eb;
    --t-primary-dark:  #1d4ed8;
    --t-primary-soft:  #dbeafe;
    --t-primary-ring:  rgba(37, 99, 235, 0.22);

    /* ---------- semântica ----------
       Reservadas para estado do dado (meta atingida, atenção,
       crítico). Nunca usar para decorar um card. */
    --t-ok:            #047857;
    --t-ok-soft:       #d1fae5;
    --t-warn:          #b45309;
    --t-warn-soft:     #fef3c7;
    --t-crit:          #be123c;
    --t-crit-soft:     #ffe4e6;
    --t-info:          #0369a1;
    --t-info-soft:     #e0f2fe;
    --t-neutral:       #475569;
    --t-neutral-soft:  #e2e8f0;

    /* ---------- séries de gráfico ----------
       Ordem fixa. Um gráfico sempre começa pela série 1. */
    --t-series-1: #2563eb;
    --t-series-2: #0891b2;
    --t-series-3: #7c3aed;
    --t-series-4: #c2410c;
    --t-series-5: #15803d;
    --t-series-6: #a16207;

    /* ---------- tipografia ---------- */
    --t-font: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --t-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

    --t-fs-xs:  0.75rem;   /* 12px — rótulo, legenda */
    --t-fs-sm:  0.8125rem; /* 13px — tabela, apoio  */
    --t-fs-md:  0.9375rem; /* 15px — corpo          */
    --t-fs-lg:  1.0625rem; /* 17px — título de card */
    --t-fs-xl:  1.375rem;  /* 22px — título de seção*/
    --t-fs-2xl: 1.75rem;   /* 28px — título de tela */
    --t-fs-kpi: 2rem;      /* 32px — valor de KPI   */

    --t-lh-tight: 1.2;
    --t-lh-normal: 1.5;

    /* ---------- espaçamento (escala de 4) ---------- */
    --t-space-1:  4px;
    --t-space-2:  8px;
    --t-space-3:  12px;
    --t-space-4:  16px;
    --t-space-5:  20px;
    --t-space-6:  24px;
    --t-space-8:  32px;
    --t-space-10: 40px;

    /* ---------- forma ---------- */
    --t-radius-sm: 8px;
    --t-radius-md: 12px;
    --t-radius-lg: 16px;
    --t-radius-pill: 999px;

    --t-shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
    --t-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
    --t-shadow-pop:  0 18px 44px rgba(15, 23, 42, 0.13);

    --t-transition: 160ms ease;

    /* ---------- medidas da casca ---------- */
    --t-header-h:  66px;
    --t-sidebar-w: 272px;
    --t-content-max: 1300px;

    /* Usada pela casca (frontend-redesign.css) para deslocar topo e conteúdo.
       Não cai a zero no mobile: lá a barra vira gaveta e a própria casca
       trata do deslocamento na sua media query. */
    --shell-sidebar-width: 272px;

    /* ---------- camadas ---------- */
    --t-z-header:  100;
    --t-z-filter:  90;
    --t-z-sidebar: 3000;
    --t-z-overlay: 2900;
    --t-z-modal:   4000;
    --t-z-toast:   5000;

    /* ============================================================
       Compatibilidade — os dois conjuntos antigos passam a apontar
       para os valores acima. É isto que acaba com a convivência
       entre --primary e --ui-primary.
       ============================================================ */

    /* de frontend-redesign.css */
    --ui-font:          var(--t-font);
    --ui-bg:            var(--t-bg);
    --ui-surface:       var(--t-surface);
    --ui-surface-soft:  var(--t-surface-soft);
    --ui-border:        var(--t-border);
    --ui-border-strong: var(--t-border-strong);
    --ui-text:          var(--t-text);
    --ui-muted:         var(--t-muted);
    --ui-muted-2:       var(--t-muted-2);
    --ui-primary:       var(--t-primary);
    --ui-primary-dark:  var(--t-primary-dark);
    --ui-primary-soft:  var(--t-primary-soft);
    --ui-emerald:       var(--t-ok);
    --ui-emerald-soft:  var(--t-ok-soft);
    --ui-amber:         var(--t-warn);
    --ui-amber-soft:    var(--t-warn-soft);
    --ui-rose:          var(--t-crit);
    --ui-rose-soft:     var(--t-crit-soft);
    --ui-radius-sm:     var(--t-radius-sm);
    --ui-radius-md:     var(--t-radius-md);
    --ui-radius-lg:     var(--t-radius-lg);
    --ui-radius-xl:     var(--t-radius-lg);
    --ui-shadow-sm:     var(--t-shadow-sm);
    --ui-shadow-card:   var(--t-shadow-card);
    --ui-shadow-strong: var(--t-shadow-pop);
    --ui-transition:    var(--t-transition);

    /* de global.css */
    --primary:      var(--t-primary);
    --primary-dark: var(--t-primary-dark);
    --primary-50:   #eff6ff;
    --primary-100:  var(--t-primary-soft);
    --success:      var(--t-ok);
    --success-50:   var(--t-ok-soft);
    --warning:      var(--t-warn);
    --warning-50:   var(--t-warn-soft);
    --danger:       var(--t-crit);
    --danger-50:    var(--t-crit-soft);
    --gray-50:      var(--t-bg);
    --gray-100:     var(--t-surface-soft);
    --gray-200:     var(--t-border);
    --gray-300:     var(--t-border-strong);
    --gray-400:     var(--t-muted-2);
    --gray-500:     var(--t-muted);
    --gray-600:     var(--t-text-2);
    --gray-700:     #1e293b;
    --gray-800:     #172033;
    --gray-900:     var(--t-text);
}

@media (max-width: 1023px) {
    :root {
        --t-header-h: 64px;
        --t-sidebar-w: 0px;
    }
}