/* ============================================================
   Design System Benel v2.0 — tokens
   Referência: governanca_benel/benel-design-system-uiux-completo.md §2, §3, §4, §5
   e DESIGN.md §3–§5.

   Regra do DS §2.1: toda propriedade visual referencia um token. Valor
   cravado no CSS é exceção que precisa de justificativa.
   ============================================================ */

:root {
    /* ── Marca (DS §2.2) ── */
    --brand-blue-900: #150649;   /* Header, sidebar, branding institucional */
    --brand-blue-800: #1d0a5e;
    --brand-blue-700: #23107a;
    --brand-blue-600: #2D63F5;   /* Ação primária, links */
    --brand-blue-500: #4A7BF7;
    --brand-blue-400: #7099F9;
    --brand-blue-200: #B8CBFC;
    --brand-blue-100: #E8EDFE;
    --brand-blue-950: #0d0130;   /* Coluna de total, rodapé de tabela */

    --brand-green-600: #009b3a;  /* Verde Benel institucional */
    --brand-green-500: #28C76F;
    --brand-green-100: #E1F8EC;

    --brand-yellow-500: #fedf00; /* Destaque; marca o item ativo do menu */
    --brand-yellow-100: #FFF9CC;

    /* ── Semânticas (DS §2.2) ── */
    --color-success:    #28C76F;
    --color-success-bg: #E1F8EC;
    --color-warning:    #FFB547;
    --color-warning-bg: #FFF5E1;
    --color-error:      #EA5455;
    --color-error-bg:   #FEEDEC;
    --color-info:       #2D63F5;
    --color-info-bg:    #E8EDFE;

    /* ── Neutros (DS §2.2) ── */
    --neutral-900: #1A1A2E;
    --neutral-800: #333333;
    --neutral-700: #4A4A4A;
    --neutral-600: #666666;
    --neutral-500: #808080;
    --neutral-400: #9CA3AF;
    --neutral-300: #C4C9D6;
    --neutral-200: #E0E0E0;
    --neutral-100: #F5F5F5;
    --neutral-50:  #FAF9FA;
    --neutral-0:   #FFFFFF;

    /* ── Semânticos de aplicação (nomes que o CSS herdado já usa) ── */
    --bg:      var(--neutral-100);
    --surface: var(--neutral-0);
    --border:  var(--neutral-200);
    --text:    var(--neutral-900);
    --muted:   var(--neutral-600);
    --accent:  var(--brand-blue-900);
    --header:  var(--brand-blue-900);
    --green:   var(--color-success);
    --red:     var(--color-error);

    /* ── Espaçamento: grade 8pt (DS §3) ── */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
    --space-9: 48px;  --space-10: 64px;

    /* ── Tipografia (DS §4) ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    --text-display:  40px;
    --text-h1:       32px;
    --text-h2:       24px;
    --text-h3:       20px;
    --text-h4:       16px;
    --text-lead:     18px;
    --text-body:     16px;
    --text-small:    14px;
    --text-caption:  12px;
    --text-overline: 11px;

    --peso-regular:  400;
    --peso-medium:   500;
    --peso-semibold: 600;
    --peso-bold:     700;

    /* ── Raio (DS Apêndice C) ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-full: 9999px;

    /* ── Elevação ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, .12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .15);

    /* ── Layout ── */
    --sidebar-recolhida: 64px;
    --sidebar-expandida: 256px;   /* DS §13.1 */
    --topbar-altura: 56px;        /* DS §13.2 */
    --rodape-altura: 34px;

    /* ── Motion (DS §18) ── */
    --transicao-rapida: .12s ease;
    --transicao: .18s ease;
    --transicao-lenta: .28s ease;

    --z-sticky: 50;
    --z-sidebar: 100;
    --z-popover: 150;
    --z-overlay: 200;
    --z-toast: 999;
}

/* ============================================================
   Ícones — DS §6
   Traço 2px herdando currentColor. Preenchido só no estado ativo,
   que é a exceção que o §6.2 autoriza.
   ============================================================ */

.icone {
    width: 20px;              /* DS §6.2: tamanho padrão */
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    pointer-events: none;     /* o clique é do botão, não do ícone */
}

.icone-sm { width: 16px; height: 16px; }
.icone-md { width: 24px; height: 24px; }
.icone-lg { width: 32px; height: 32px; }

/* Ícone girando — usado nos estados de carregamento. */
.icone-girando { animation: icone-girar 1s linear infinite; }

@keyframes icone-girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* DS §18: respeitar quem pediu menos movimento. */
    .icone-girando { animation: none; }
}

/* ============================================================
   Números em tabela — DS §4.1
   A Inter tem figuras tabulares; sem isso as colunas de números
   ficam desalinhadas entre linhas.
   ============================================================ */

.num, .num-zero, .total-col, .mono, td.num, th.total-col {
    font-variant-numeric: tabular-nums;
}