/* ==========================================================================
   VS Design System — tokens
   Fonte de verdade: protótipo aprovado (claude.ai/artifact/Jf6PrQvJ5Ccok3ZxmZPnL3).
   Três níveis: primitivos (--vs-<família>-<passo>) → semânticos (--vs-bg-*,
   --vs-text-*, --vs-status-*) → de componente (--vs-sidebar-w, --vs-card-radius).
   Componentes e telas usam SEMÂNTICOS; primitivos só aqui e nos temas.
   Docs: docs/05-ui/design-system.md
   ========================================================================== */

:root {
    /* ---------- Primitivos: tinta (marinho evoluído, âncora #0E2238) ---------- */
    --vs-ink-950: #071322;
    --vs-ink-900: #0E2238;
    --vs-ink-800: #1B3350;
    --vs-ink-700: #2A4566;
    --vs-ink-600: #3D5A7E;
    --vs-ink-500: #5B7396;
    --vs-ink-300: #B6C1D1;
    --vs-ink-200: #DCE3EE;
    --vs-ink-100: #E9EDF3;
    --vs-ink-50:  #EEF2F7;

    /* ---------- Primitivos: neutros ---------- */
    --vs-gray-0:   #FFFFFF;
    --vs-gray-25:  #FBFBFC;
    --vs-gray-50:  #F9FAFB;
    --vs-gray-75:  #F6F7F9;
    --vs-gray-100: #F2F4F7;
    --vs-gray-150: #EEF0F3;
    --vs-gray-200: #E6E8EC;
    --vs-gray-250: #E4E7EC;
    --vs-gray-300: #D5D9E0;
    --vs-gray-350: #CBD1D9;
    --vs-gray-400: #C2C8D0;
    --vs-gray-500: #98A2B3;
    --vs-gray-600: #667085; /* 4,6:1 sobre o canvas (#F6F7F9) — o anterior #6B7584 ficava em 4,45:1, abaixo do AA */
    --vs-gray-700: #4F5A6B;
    --vs-gray-800: #1B2533;
    --vs-gray-900: #111827;

    /* ---------- Primitivos: azul Mercosul (acento) ---------- */
    --vs-mercosul-50:  #EEF3FF;
    --vs-mercosul-200: #C7D5FB;
    --vs-mercosul-500: #2453D6;
    --vs-mercosul-700: #1A3FA8;

    /* ---------- Primitivos: status ---------- */
    --vs-green-50:  #ECFDF3;
    --vs-green-200: #ABEFC6;
    --vs-green-500: #12B76A;
    --vs-green-600: #079455;
    --vs-green-700: #067647;
    --vs-green-800: #05603A;
    --vs-green-900: #054F31;

    --vs-amber-50:  #FFFAEB;
    --vs-amber-200: #FEDF89;
    --vs-amber-400: #FDB022;
    --vs-amber-500: #F79009;
    --vs-amber-700: #B54708;
    --vs-amber-800: #93370D;
    --vs-amber-900: #7A2E0E;

    --vs-red-50:  #FEF3F2;
    --vs-red-100: #FEE4E2;
    --vs-red-200: #FECDCA;
    --vs-red-500: #F04438;
    --vs-red-600: #D92D20;
    --vs-red-700: #B42318;
    --vs-red-800: #912018;
    --vs-red-900: #7A271A;

    /* ---------- Tipografia ---------- */
    --vs-font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --vs-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --vs-text-xs:   11px;
    --vs-text-sm:   12px;
    --vs-text-md:   13px;
    --vs-text-base: 14px;
    --vs-text-lg:   15px;
    --vs-text-xl:   16px;
    --vs-text-2xl:  20px;
    --vs-text-3xl:  24px;
    --vs-text-4xl:  30px;
    --vs-weight-regular: 400;
    --vs-weight-medium:  500;
    --vs-weight-semibold: 600;
    --vs-leading: 1.45;
    --vs-tracking-tight: -0.02em;
    --vs-tracking-snug: -0.01em;
    --vs-tracking-caps: 0.06em;

    /* ---------- Espaço (escala de 4px) ---------- */
    --vs-space-1: 4px;
    --vs-space-2: 8px;
    --vs-space-3: 12px;
    --vs-space-4: 16px;
    --vs-space-5: 20px;
    --vs-space-6: 24px;
    --vs-space-7: 28px;
    --vs-space-8: 32px;
    --vs-space-10: 40px;
    --vs-space-12: 48px;

    /* ---------- Forma ---------- */
    --vs-radius-xs: 5px;
    --vs-radius-sm: 8px;
    --vs-radius-md: 10px;
    --vs-radius-lg: 12px;
    --vs-radius-xl: 14px;
    --vs-radius-2xl: 18px;
    --vs-radius-full: 999px;

    --vs-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --vs-shadow-sm: 0 1px 2px rgba(16, 24, 40, .08);
    --vs-shadow-overlay: 0 8px 24px rgba(16, 24, 40, .18);
    --vs-shadow-dialog: 0 20px 48px rgba(16, 24, 40, .22);

    /* ---------- Movimento ---------- */
    --vs-ease: cubic-bezier(.2, .8, .2, 1);
    --vs-dur-fast: 160ms;
    --vs-dur-base: 180ms;
    --vs-dur-mid: 240ms;
    --vs-dur-slow: 400ms;

    /* ---------- Camadas ---------- */
    --vs-z-sticky: 100;
    --vs-z-sidebar: 200;
    --vs-z-dropdown: 1000;
    --vs-z-overlay: 1040;
    --vs-z-dialog: 1050;
    --vs-z-toast: 1080;

    /* ======================================================================
       Semânticos (tema claro)
       ====================================================================== */
    --vs-bg-canvas:  var(--vs-gray-75);
    --vs-bg-surface: var(--vs-gray-0);
    --vs-bg-subtle:  var(--vs-gray-50);
    --vs-bg-muted:   var(--vs-gray-100);
    --vs-bg-sunken:  var(--vs-gray-150);
    --vs-bg-sidebar: var(--vs-gray-25);
    --vs-bg-hover:   var(--vs-gray-100);
    --vs-bg-row-hover: var(--vs-gray-50);

    --vs-border:        var(--vs-gray-200);
    --vs-border-strong: var(--vs-gray-300);
    --vs-border-subtle: var(--vs-gray-150);
    --vs-divider:       var(--vs-gray-100);

    --vs-text:   var(--vs-ink-900);
    --vs-text-2: var(--vs-gray-700);
    --vs-text-3: var(--vs-gray-600);
    --vs-text-placeholder: var(--vs-gray-350);
    --vs-text-inverse: var(--vs-gray-0);
    --vs-text-separator: var(--vs-gray-400);

    /* Tinta: ação primária, item ativo, destaque de gráfico. Marca troca aqui. */
    --vs-ink:       var(--vs-ink-900);
    --vs-ink-hover: var(--vs-ink-800);
    --vs-ink-soft:  var(--vs-ink-50);
    --vs-ink-rgb:   14, 34, 56;

    /* Acento: foco, link, seleção. */
    --vs-accent:       var(--vs-mercosul-500);
    --vs-accent-hover: var(--vs-mercosul-700);
    --vs-accent-soft:  var(--vs-mercosul-50);
    --vs-accent-rgb:   36, 83, 214;
    --vs-focus-ring:   0 0 0 3px rgba(36, 83, 214, .16);
    --vs-focus-outline: 2px solid var(--vs-accent);

    /* Status — resultado da verificação, andamento e fatura (3 famílias, 1 vocabulário). */
    --vs-ok-bg: var(--vs-green-50);   --vs-ok-fg: var(--vs-green-700);   --vs-ok-border: var(--vs-green-200);   --vs-ok-dot: var(--vs-green-500);   --vs-ok-title: var(--vs-green-900);   --vs-ok-sub: var(--vs-green-800);
    --vs-warn-bg: var(--vs-amber-50); --vs-warn-fg: var(--vs-amber-700); --vs-warn-border: var(--vs-amber-200); --vs-warn-dot: var(--vs-amber-500); --vs-warn-title: var(--vs-amber-900); --vs-warn-sub: var(--vs-amber-800);
    --vs-risk-bg: var(--vs-red-50);   --vs-risk-fg: var(--vs-red-700);   --vs-risk-border: var(--vs-red-200);   --vs-risk-dot: var(--vs-red-500);   --vs-risk-title: var(--vs-red-900);   --vs-risk-sub: var(--vs-red-800);
    --vs-info-bg: var(--vs-mercosul-50); --vs-info-fg: var(--vs-mercosul-700); --vs-info-border: var(--vs-mercosul-200); --vs-info-dot: var(--vs-mercosul-500); --vs-info-title: var(--vs-mercosul-700); --vs-info-sub: var(--vs-mercosul-700);
    --vs-neutral-bg: var(--vs-gray-100); --vs-neutral-fg: var(--vs-gray-700); --vs-neutral-border: var(--vs-gray-250); --vs-neutral-dot: var(--vs-gray-500); --vs-neutral-title: var(--vs-ink-900); --vs-neutral-sub: var(--vs-gray-700);
    --vs-danger-solid: var(--vs-red-600);

    /* Gráficos: destaque sólido em tinta, demais barras pálidas hachuradas. */
    --vs-chart-highlight: var(--vs-ink);
    --vs-chart-pale: var(--vs-ink-200);
    --vs-chart-pale-2: var(--vs-ink-100);
    --vs-chart-hatch: repeating-linear-gradient(135deg, var(--vs-chart-pale) 0 5px, var(--vs-chart-pale-2) 5px 10px);
    --vs-chart-grid: var(--vs-gray-100);
    --vs-chart-avg: #8A93A3;
    --vs-chart-1: var(--vs-ink);
    --vs-chart-2: var(--vs-mercosul-500);
    --vs-chart-3: var(--vs-green-500);
    --vs-chart-4: var(--vs-amber-500);
    --vs-chart-5: var(--vs-red-500);
    --vs-chart-6: var(--vs-ink-500);

    /* Placa (assinatura). A faixa é o azul real da placa Mercosul: NÃO muda com a marca. */
    --vs-plate-band: #2453D6;
    --vs-plate-border: var(--vs-gray-800);
    --vs-plate-text: var(--vs-gray-900);
    --vs-plate-bg: #FFFFFF;
    --vs-plate-old-bg: #E3E6EA;
    --vs-plate-old-border: #5B6576;
    --vs-plate-chassi-band: var(--vs-gray-700);
    --vs-plate-label: #FFFFFF;

    /* Semáforo do parecer técnico (caixa escura com três luzes, igual em qualquer tema). */
    --vs-semaforo-bg: var(--vs-gray-800);
    --vs-semaforo-amarelo: var(--vs-amber-400);

    /* Bandeira na faixa da placa (cores oficiais, fixas). */
    --vs-flag-verde: #1F9D55;
    --vs-flag-amarelo: #F7D117;
    --vs-flag-azul: #1E3A8A;

    /* Toast (superfície escura sobre qualquer tema) */
    --vs-toast-bg: var(--vs-ink-900);
    --vs-toast-text: #FFFFFF;
    --vs-toast-text-2: #C1C9D6;
    --vs-toast-ok: #6CE9A6;
    --vs-toast-warn: #FEC84B;
    --vs-toast-risk: #FDA29B;
    --vs-toast-info: #93AEF5;

    /* Hover de opção selecionável e véu dos diálogos */
    --vs-border-hover: #C9D1DC;
    --vs-overlay-bg: rgba(14, 34, 56, .32);
    --vs-focus-ring-plate: 0 0 0 4px rgba(36, 83, 214, .16);

    /* Texto e preenchimento sobre superfície de tinta (painel da marca no login) */
    --vs-on-ink-fill: rgba(255, 255, 255, .12);
    --vs-on-ink-muted: rgba(255, 255, 255, .72);
    --vs-on-ink-subtle: rgba(255, 255, 255, .56);

    /* ======================================================================
       De componente
       ====================================================================== */
    --vs-sidebar-w: 248px;
    --vs-sidebar-w-collapsed: 64px;
    --vs-topbar-h: 64px;
    /* Fluido: a página ocupa toda a área ao lado da sidebar até monitores 2K (2560px); acima
       disso fica centralizada. Antes (1280px, alinhada à esquerda) sobravam 360px em Full HD e
       1.000px em 2K à direita. Formulários têm o próprio limite de leitura (.vs-form-grid etc.). */
    --vs-content-max: 2400px;
    --vs-content-pad-x: 32px;
    --vs-card-radius: var(--vs-radius-xl);
    --vs-card-pad: 16px 18px;
    --vs-control-h-sm: 32px;
    --vs-control-h-md: 36px;
    --vs-control-h-lg: 46px;
    --vs-control-radius: var(--vs-radius-md);
    --vs-table-row-h: 52px;
}

/* --------------------------------------------------------------------------
   Tema escuro — liberado por Branding:EnableDarkMode; a pessoa escolhe Claro, Escuro ou
   Sistema no menu da conta (cookie vs-tema). Validado com axe em todas as telas (F6).
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --vs-bg-canvas:  #0B111A;
    --vs-bg-surface: #111A26;
    --vs-bg-subtle:  #152030;
    --vs-bg-muted:   #1A2636;
    --vs-bg-sunken:  #0E1622;
    --vs-bg-sidebar: #0D1520;
    --vs-bg-hover:   #1A2636;
    --vs-bg-row-hover: #152030;
    --vs-border:        #223044;
    --vs-border-strong: #2E3F57;
    --vs-border-subtle: #1A2636;
    --vs-divider:       #1A2636;
    --vs-text:   #E8EDF4;
    --vs-text-2: #AAB4C3;
    --vs-text-3: #8591A3;
    --vs-text-placeholder: #4A5668;
    --vs-ink:       #E8EDF4;
    --vs-ink-hover: #FFFFFF;
    --vs-ink-soft:  #1E2B3D;
    --vs-ink-rgb:   232, 237, 244;
    --vs-accent:       #6E92F0;
    --vs-accent-hover: #93AEF5;
    --vs-accent-soft:  #16264A;
    --vs-ok-bg: #0D2A1D;   --vs-ok-fg: #6CE9A6;   --vs-ok-border: #14532D;
    --vs-warn-bg: #2E1E06; --vs-warn-fg: #FEC84B; --vs-warn-border: #6B3A06;
    --vs-risk-bg: #33130F; --vs-risk-fg: #FDA29B; --vs-risk-border: #7A271A;
    --vs-info-bg: #16264A; --vs-info-fg: #93AEF5; --vs-info-border: #2A4A9A;
    --vs-neutral-bg: #1A2636; --vs-neutral-fg: #AAB4C3; --vs-neutral-border: #2E3F57;
    --vs-chart-pale: #22324A;
    --vs-chart-pale-2: #1A283B;
    --vs-chart-grid: #1A2636;
    /* Texto sobre a tinta de ação (que no escuro é clara) e separadores. */
    --vs-text-inverse: #0B111A;
    --vs-text-separator: #4A5668;
    --vs-border-hover: #3A4D68;
    --vs-overlay-bg: rgba(0, 0, 0, .55);
    /* Título, subtítulo e ponto das faixas de status (veredito, alertas). */
    --vs-ok-dot: #32D583;   --vs-ok-title: #A6F4C5;   --vs-ok-sub: #6CE9A6;
    --vs-warn-dot: #FDB022; --vs-warn-title: #FEDF89; --vs-warn-sub: #FEC84B;
    --vs-risk-dot: #F97066; --vs-risk-title: #FECDCA; --vs-risk-sub: #FDA29B;
    --vs-info-dot: #6E92F0; --vs-info-title: #C7D5FB; --vs-info-sub: #93AEF5;
    --vs-neutral-dot: #8591A3; --vs-neutral-title: #E8EDF4; --vs-neutral-sub: #AAB4C3;
    --vs-semaforo-bg: #0B111A;
    --vs-toast-bg: #1E2B3D;
}

/* "Sistema": mesmo tema escuro quando o sistema operacional está no escuro. */
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --vs-bg-canvas:  #0B111A;
        --vs-bg-surface: #111A26;
        --vs-bg-subtle:  #152030;
        --vs-bg-muted:   #1A2636;
        --vs-bg-sunken:  #0E1622;
        --vs-bg-sidebar: #0D1520;
        --vs-bg-hover:   #1A2636;
        --vs-bg-row-hover: #152030;
        --vs-border:        #223044;
        --vs-border-strong: #2E3F57;
        --vs-border-subtle: #1A2636;
        --vs-divider:       #1A2636;
        --vs-text:   #E8EDF4;
        --vs-text-2: #AAB4C3;
        --vs-text-3: #8591A3;
        --vs-text-placeholder: #4A5668;
        --vs-ink:       #E8EDF4;
        --vs-ink-hover: #FFFFFF;
        --vs-ink-soft:  #1E2B3D;
        --vs-ink-rgb:   232, 237, 244;
        --vs-accent:       #6E92F0;
        --vs-accent-hover: #93AEF5;
        --vs-accent-soft:  #16264A;
        --vs-ok-bg: #0D2A1D;   --vs-ok-fg: #6CE9A6;   --vs-ok-border: #14532D;
        --vs-warn-bg: #2E1E06; --vs-warn-fg: #FEC84B; --vs-warn-border: #6B3A06;
        --vs-risk-bg: #33130F; --vs-risk-fg: #FDA29B; --vs-risk-border: #7A271A;
        --vs-info-bg: #16264A; --vs-info-fg: #93AEF5; --vs-info-border: #2A4A9A;
        --vs-neutral-bg: #1A2636; --vs-neutral-fg: #AAB4C3; --vs-neutral-border: #2E3F57;
        --vs-chart-pale: #22324A;
        --vs-chart-pale-2: #1A283B;
        --vs-chart-grid: #1A2636;
        /* Texto sobre a tinta de ação (que no escuro é clara) e separadores. */
        --vs-text-inverse: #0B111A;
        --vs-text-separator: #4A5668;
        --vs-border-hover: #3A4D68;
        --vs-overlay-bg: rgba(0, 0, 0, .55);
        /* Título, subtítulo e ponto das faixas de status (veredito, alertas). */
        --vs-ok-dot: #32D583;   --vs-ok-title: #A6F4C5;   --vs-ok-sub: #6CE9A6;
        --vs-warn-dot: #FDB022; --vs-warn-title: #FEDF89; --vs-warn-sub: #FEC84B;
        --vs-risk-dot: #F97066; --vs-risk-title: #FECDCA; --vs-risk-sub: #FDA29B;
        --vs-info-dot: #6E92F0; --vs-info-title: #C7D5FB; --vs-info-sub: #93AEF5;
        --vs-neutral-dot: #8591A3; --vs-neutral-title: #E8EDF4; --vs-neutral-sub: #AAB4C3;
        --vs-semaforo-bg: #0B111A;
        --vs-toast-bg: #1E2B3D;
}
}