/* =============================================================================
   DESIGN TOKENS — Aurora V3  ·  ERP Fazenda Camping  ·  2026
   Fonte única de cor, espaçamento, tipografia e motion.
   NENHUM hex fora deste arquivo (exceto aurora.css que importa este).
   ============================================================================= */

/* ── Inter local (sem chamada ao Google Fonts) ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700.woff2') format('woff2');
}

:root {
  /* ── Primitivos: paleta de cores ── */
  --gray-950: #0B0D14;
  --gray-900: #11141D;
  --gray-850: #161A26;
  --gray-800: #1C2130;
  --gray-700: #262C3F;
  --gray-600: #39415A;
  --gray-500: #5A6378;
  --gray-400: #8B93AD;
  --gray-300: #AAB1C7;
  --gray-200: #CDD3E4;
  --gray-100: #E7E9F2;
  --gray-50:  #F4F5F9;

  /* Violeta (marca primária) */
  --violet-700: #5B4BD4;
  --violet-600: #6A5AE8;
  --violet-500: #7C6CFF;
  --violet-400: #968AFF;
  --violet-300: #B8B0FF;
  --violet-500-a15: rgba(124,108,255,.15);
  --violet-500-a25: rgba(124,108,255,.25);

  /* Verde (sucesso / entrada — semântico) */
  --green-600: #28A871;
  --green-500: #34C98E;
  --green-400: #50DBA4;
  --green-a15: rgba(52,201,142,.15);

  /* Vermelho (erro / saída) */
  --red-600:  #D95454;
  --red-500:  #F26D6D;
  --red-400:  #F58E8E;
  --red-a15:  rgba(242,109,109,.15);

  /* Âmbar (atenção) */
  --amber-600: #D4981A;
  --amber-500: #F5B84D;
  --amber-400: #F9CB75;
  --amber-a15: rgba(245,184,77,.15);

  /* Azul (info) */
  --blue-600: #3D87D4;
  --blue-500: #5EA2EF;
  --blue-400: #7FB8F5;
  --blue-a15: rgba(94,162,239,.15);

  /* Cyan (neon — info vibrante) */
  --cyan-600: #00D9FF;
  --cyan-500: #1FECFF;
  --cyan-a15: rgba(31,236,255,.15);

  /* Magenta (neon — accent vibrante) */
  --magenta-600: #E91E8C;
  --magenta-500: #FF1493;
  --magenta-a15: rgba(255,20,147,.15);

  /* Orange vibrante (neon — despesa/saída) */
  --orange-600: #FF8C00;
  --orange-500: #FFA500;
  --orange-a15: rgba(255,165,0,.15);

  /* Opacidades .20 e .25 */
  --green-a20: rgba(52,201,142,.20);
  --green-a25: rgba(52,201,142,.25);
  --red-a20:   rgba(242,109,109,.20);
  --red-a25:   rgba(242,109,109,.25);
  --blue-a20:  rgba(94,162,239,.20);
  --blue-a25:  rgba(94,162,239,.25);
  --amber-a20: rgba(245,184,77,.20);
  --amber-a25: rgba(245,184,77,.25);
  --orange-a20: rgba(255,165,0,.20);
  --orange-a25: rgba(255,165,0,.25);

  /* ── Tokens semânticos ── */

  /* Fundo — modelo de 5 camadas */
  --bg-canvas:   var(--gray-950);   /* L0: fundo da página */
  --bg-surface:  var(--gray-900);   /* L1: painéis principais */
  --bg-raised:   var(--gray-850);   /* L2: cards, tabelas, forms */
  --bg-overlay:  var(--gray-800);   /* L3: modais, dropdowns */
  --bg-glass:    rgba(28,33,48,.75); /* sidebar, modais c/ blur */
  --bg-hover:    rgba(124,108,255,.08);
  --bg-active:   rgba(124,108,255,.15);
  --bg-popover:  var(--gray-700);   /* L4: dropdowns/menus/popovers */
  /* Papel. Único fundo branco do ERP: o iframe do modal de relatório, antes de
     o documento carregar (sem ele, um retângulo escuro pisca e depois vira
     folha branca). O documento em si NÃO usa este token — ele não carrega
     tokens.css de propósito (ver static/css/relatorio.css). Existe aqui para
     manter "nenhum hex fora de tokens.css" do lado do ERP. */
  --paper:       #FFFFFF;

  /* Bordas */
  --border-subtle:   rgba(255,255,255,.07);
  --border-soft:     rgba(255,255,255,.12);
  --border-strong:   rgba(255,255,255,.2);
  --border-elevated: rgba(255,255,255,.30); /* borda de L4 — ≥3:1 contra L3 */
  --border-focus:    var(--violet-500);

  /* Scrims — únicos, tom do canvas (não preto puro) */
  --scrim:       rgba(4,6,12,.45);
  --scrim-heavy: rgba(4,6,12,.85); /* exclusivo de lightbox de imagem */

  /* Texto */
  --text-primary:   var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-muted:     var(--gray-400);
  --text-placeholder: var(--gray-500);
  --text-on-accent: #fff;

  /* Acento */
  --accent:        var(--violet-500);
  --accent-hover:  var(--violet-400);
  --accent-subtle: var(--violet-500-a15);

  /* Status — texto + fundo pill */
  --status-success:    var(--green-500);
  --status-success-bg: var(--green-a15);
  --status-danger:     var(--red-500);
  --status-danger-bg:  var(--red-a15);
  --status-warning:    var(--amber-500);
  --status-warning-bg: var(--amber-a15);
  --status-info:       var(--blue-500);
  --status-info-bg:    var(--blue-a15);
  --status-neutral:    var(--gray-400);
  --status-neutral-bg: rgba(139,147,173,.15);
  --status-accent:     var(--violet-500);
  --status-accent-bg:  var(--violet-500-a15);

  /* Tipos financeiros (entrada/saída/resultado/neutro) */
  --type-entrada:   var(--green-500);
  --type-saida:     var(--red-500);
  --type-resultado: var(--violet-500);
  --type-neutro:    var(--blue-500);

  /* Glows — usar apenas em primário, hover e foco */
  --glow-accent:  0 0 16px var(--violet-500-a25);
  --glow-success: 0 0 16px var(--green-a15);
  --glow-danger:  0 0 16px var(--red-a15);
  --glow-cyan:    0 0 16px var(--cyan-a15);

  /* Gradientes */
  --grad-accent:  linear-gradient(135deg, var(--violet-700), var(--violet-500));
  --grad-success: linear-gradient(135deg, var(--green-600), var(--green-400));
  --grad-danger:  linear-gradient(135deg, var(--red-600), var(--red-400));
  --grad-info:    linear-gradient(135deg, var(--blue-600), var(--cyan-600));
  --grad-aurora:  linear-gradient(120deg, var(--violet-600), var(--magenta-600), var(--cyan-600));

  /* ── Tipografia — em rem (base: html{font-size:100%}=16px) para respeitar
     a preferência de tamanho de fonte do usuário/acessibilidade ── */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.78125rem; /* 12.5px */
  --text-base: 0.875rem;   /* 14px */
  --text-lg:   1rem;       /* 16px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.625rem;   /* 26px */
  /* F2: 34px domina em 375px — clamp desce até 26px no mobile sem tocar
     nenhum template (título de dashboard/H1 usa --text-3xl direto). */
  --text-3xl:  clamp(1.625rem, 5vw + 1rem, 2.125rem);

  /* ── Espaçamento (escala 4pt) — em rem pelo mesmo motivo ── */
  --sp-1: 0.25rem; /* 4px */
  --sp-2: 0.5rem;  /* 8px */
  --sp-3: 0.75rem; /* 12px */
  --sp-4: 1rem;    /* 16px */
  --sp-5: 1.25rem; /* 20px */
  --sp-6: 1.5rem;  /* 24px */
  --sp-7: 2rem;    /* 32px */
  --sp-8: 3rem;    /* 48px */

  /* ── Border-radius ── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-full: 999px;

  /* ── Sombras ── */
  --shadow-sm:      0 1px 4px rgba(0,0,0,.3);
  --shadow-md:      0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.4);
  --shadow-overlay: 0 16px 48px rgba(0,0,0,.5);
  /* Franja no fim de tabela que ainda tem coluna escondida à direita —
     ver .table-wrap--scroll-hint em aurora.css. Não é --scrim (esse é
     fundo de overlay inteiro); é só a dica visual de "role pra ver mais". */
  --table-scroll-hint: rgba(4,6,12,.5);

  /* ── Glass ── */
  --glass-blur: blur(16px);
  --glass-blur-sm: blur(8px);

  /* Desfoque do modo "ocultar valores" (docs/PLANO_OCULTAR_VALORES.md).
     Em `em`, não em `px`: o raio tem de escalar com o tamanho da fonte, senão
     0.45em de um KPI (--text-2xl) borra igual ao de uma célula de tabela e um
     dos dois fica errado — o KPI legível ou a célula virando mancha. */
  --blur-valor: blur(0.45em);

  /* ── Motion ── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ── Layout ── */
  --sidebar-w:        256px;
  --sidebar-collapsed: 64px;
  /* Era 1280px. Achado do Felipe (06/08, 3ª rodada): a tabela de Lançamentos
     (11 colunas) precisa de ~1349px de conteúdo — com o teto antigo (área
     útil 1280-48=1232px) ela sempre precisava rolar, mesmo em monitor largo
     sobrando espaço. O aviso visual de scroll (table-wrap--scroll-hint)
     resolvia tecnicamente mas o Felipe queria a tabela CABENDO, não um
     lembrete pra rolar. 1400px dá ~1352px úteis — cabe a tabela mais larga
     de hoje com folga pequena. Afeta toda página (é o teto do .page-inner) —
     verificado em Lançamentos, Conciliação e Dashboard antes de fechar. */
  --content-max:     1400px;
  --navbar-h:         56px;

  /* ── Escala de z-index (Overlay Manager) — ESCADA ÚNICA (G1).
     Regra: nenhum z-index numérico fora deste bloco. As exceções são só
     empilhamento LOCAL dentro de um componente (sticky thead z1/z2) e a
     página-diagrama `mapa_erp` — ambas na whitelist do teste-lint
     `tests/test_lint_templates.py`.
     A ordem aqui é a ordem visual real; ver docs/PLANO_CORRECAO_ESTRUTURAL_UX.md. */
  --z-fab:            140;  /* botão flutuante mobile, sob a topbar */
  --z-topbar:         150;
  --z-sidebar:        200;  /* sidebar em repouso (desktop / off-canvas fechada) */
  --z-header-dropdown:250;  /* menu do usuário no header (acima da topbar) */
  --z-scrim:          900;  /* fundo compartilhado de TODO overlay — FIXO */
  --z-sidebar-open:   905;  /* sidebar mobile aberta: logo acima do scrim */
  --z-sheet:          910;
  --z-modal:          920;
  --z-popover:        930;  /* .ts-dropdown — precisa vencer sheet E modal */
  --z-toast:          940;
  --z-lightbox:       950;
  --z-cmdk:           960;
  --z-skip-link:      970;  /* acessibilidade: vence tudo quando focado */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}