/* ==========================================================================
   FIDAVIA — DESIGN TOKENS
   Sistema de design da plataforma Fidavia (ex-AutoControle)
   FGI Data Solution · v1.0

   Todos os pares texto/fundo deste arquivo foram validados contra
   WCAG 2.1 AA (4.5:1 para texto, 3:1 para elementos de interface e
   séries de gráfico), em modo claro e escuro.

   COMO USAR
   1. Importe este arquivo ANTES do style.css do projeto.
   2. Use sempre os tokens semânticos (--fv-*), nunca a escala crua
      (--fv-blu-600 etc.) direto nos componentes. A escala existe para
      alimentar os tokens semânticos e para casos excepcionais.
   3. O modo escuro liga sozinho por prefers-color-scheme e pode ser
      forçado com [data-theme="dark"] no <html>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESCALAS CRUAS  —  não use diretamente nos componentes
   -------------------------------------------------------------------------- */
:root {
  /* Blu Fidavia — institucional. Asfalto à noite, mostrador de painel.
     Carrega confiança, estrutura e hierarquia. */
  --fv-blu-50:  #EFF4FC;
  --fv-blu-100: #DAE5F7;
  --fv-blu-200: #B5C9EC;
  --fv-blu-300: #8AA7DC;
  --fv-blu-400: #5E82C6;
  --fv-blu-500: #3E63AA;
  --fv-blu-600: #2E4C8A;
  --fv-blu-700: #243B6D;
  --fv-blu-800: #1B2D53;
  --fv-blu-900: #13213D;
  --fv-blu-950: #0C1628;

  /* Rame — o cobre. Pinça de freio, costura de couro, metal nobre.
     Acento raro: no máximo 10% da área da tela. */
  --fv-rame-50:  #FDF5ED;
  --fv-rame-100: #FAE6D2;
  --fv-rame-200: #F4CAA4;
  --fv-rame-300: #EAA96E;
  --fv-rame-400: #DB8B44;
  --fv-rame-500: #C4702A;
  --fv-rame-600: #A55A21;
  --fv-rame-700: #84471B;
  --fv-rame-800: #653616;
  --fv-rame-900: #4B2711;
  --fv-rame-950: #2C160A;

  /* Grafite — neutros de viés azulado frio. Toda a estrutura. */
  --fv-grafite-0:   #FFFFFF;
  --fv-grafite-25:  #FBFCFD;
  --fv-grafite-50:  #F6F8FA;
  --fv-grafite-100: #EDF1F5;
  --fv-grafite-200: #DDE3EA;
  --fv-grafite-300: #C4CCD7;
  --fv-grafite-400: #9BA6B5;
  --fv-grafite-500: #75808F;
  --fv-grafite-600: #5B6573;
  --fv-grafite-700: #454E5A;
  --fv-grafite-800: #333A45;
  --fv-grafite-900: #232830;
  --fv-grafite-950: #14171D;
}

/* --------------------------------------------------------------------------
   2. TOKENS SEMÂNTICOS — MODO CLARO (padrão)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superfícies — do fundo mais distante ao elemento mais próximo */
  --fv-bg:              #F6F8FA;  /* fundo da aplicação */
  --fv-surface:         #FFFFFF;  /* cards, modais, tabelas */
  --fv-surface-raised:  #FFFFFF;  /* elemento acima de um card */
  --fv-surface-sunken:  #EDF1F5;  /* campos, áreas recuadas, thead */
  --fv-surface-inverse: #13213D;  /* sidebar, rodapé, faixas escuras */

  /* Traços */
  --fv-border:        #D8DFE7;  /* borda padrão */
  --fv-border-strong: #C4CCD7;  /* divisórias que precisam pesar mais */
  --fv-border-subtle: #EDF1F5;  /* separadores internos */

  /* Texto — todos validados sobre --fv-surface */
  --fv-text:         #232830;  /* 14.81:1  títulos e corpo */
  --fv-text-muted:   #5B6573;  /*  5.91:1  apoio, legendas */
  --fv-text-subtle:  #697382;  /*  4.80:1  placeholders, metadados */
  --fv-text-inverse: #EDF1F5;  /* sobre --fv-surface-inverse */

  /* Ação primária */
  --fv-primary:          #2E4C8A;  /* 8.34:1 sobre branco */
  --fv-primary-hover:    #243B6D;
  --fv-primary-active:   #1B2D53;
  --fv-primary-subtle:   #EFF4FC;  /* fundo de chip/badge primário */
  --fv-primary-on:       #FFFFFF;  /* texto sobre --fv-primary */
  --fv-primary-on-subtle:#243B6D;  /* texto sobre --fv-primary-subtle */

  /* Acento (Rame) — CTA secundário, destaque de valor, marcador ativo */
  --fv-accent:           #C4702A;
  --fv-accent-hover:     #A55A21;
  --fv-accent-active:    #84471B;
  --fv-accent-subtle:    #FDF5ED;
  --fv-accent-on:        #FFFFFF;  /* use sobre --fv-accent-hover ou mais escuro */
  --fv-accent-on-subtle: #84471B;  /* 6.71:1 */

  /* Estados semânticos */
  --fv-success:        #1B6E47;
  --fv-success-subtle: #E6F4EC;
  --fv-warning:        #8F5B12;
  --fv-warning-subtle: #FCF2E0;
  --fv-danger:         #A8241D;
  --fv-danger-subtle:  #FBEAE8;
  --fv-info:           #2E4C8A;
  --fv-info-subtle:    #EFF4FC;

  /* Foco — sempre visível, nunca removido */
  --fv-focus-ring:   #2E4C8A;
  --fv-focus-shadow: 0 0 0 3px rgba(46, 76, 138, 0.28);

  /* Séries de gráfico — 6 matizes distintas, todas ≥3:1 sobre a superfície.
     Use nesta ordem; não reordene entre telas. */
  --fv-chart-1: #2E4C8A;  /* blu     */
  --fv-chart-2: #C4702A;  /* rame    */
  --fv-chart-3: #1B6E47;  /* verde   */
  --fv-chart-4: #0F6B7C;  /* teal    */
  --fv-chart-5: #6B4A9E;  /* viola   */
  --fv-chart-6: #5B6573;  /* grafite */
  --fv-chart-grid: #EDF1F5;
  --fv-chart-axis: #697382;

  /* Elevação — sombras com tinta azul, nunca preto puro */
  --fv-shadow-xs: 0 1px 2px rgba(19, 33, 61, 0.06);
  --fv-shadow-sm: 0 1px 3px rgba(19, 33, 61, 0.08), 0 1px 2px rgba(19, 33, 61, 0.04);
  --fv-shadow-md: 0 4px 12px rgba(19, 33, 61, 0.08), 0 2px 4px rgba(19, 33, 61, 0.04);
  --fv-shadow-lg: 0 12px 28px rgba(19, 33, 61, 0.12), 0 4px 8px rgba(19, 33, 61, 0.05);
  --fv-shadow-xl: 0 24px 56px rgba(19, 33, 61, 0.16), 0 8px 16px rgba(19, 33, 61, 0.06);

  /* Sidebar */
  --fv-sidebar-bg:          linear-gradient(180deg, #1B2D53 0%, #0C1628 100%);
  --fv-sidebar-text:        rgba(237, 241, 245, 0.78);
  --fv-sidebar-text-active: #FFFFFF;
  --fv-sidebar-hover:       rgba(255, 255, 255, 0.07);
  --fv-sidebar-active:      rgba(255, 255, 255, 0.12);
  --fv-sidebar-marker:      #EAA96E;  /* barra do item ativo — o único rame aqui */
  --fv-sidebar-divider:     rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   3. TOKENS SEMÂNTICOS — MODO ESCURO
   Não é o modo claro invertido: as superfícies sobem de luminosidade
   conforme se aproximam do usuário, e as cores de marca clareiam para
   manter contraste. Sombra quase não funciona aqui — a hierarquia vem
   da superfície, não da sombra.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --fv-bg:              #0E1420;
  --fv-surface:         #161D2C;
  --fv-surface-raised:  #1F273A;
  --fv-surface-sunken:  #101725;
  --fv-surface-inverse: #EDF1F5;

  --fv-border:        #2C3548;
  --fv-border-strong: #3B4660;
  --fv-border-subtle: #1F273A;

  --fv-text:         #EDF1F5;  /* 14.85:1 sobre --fv-surface */
  --fv-text-muted:   #A9B4C4;  /*  8.03:1 */
  --fv-text-subtle:  #7E8A9B;  /*  4.81:1 */
  --fv-text-inverse: #232830;

  --fv-primary:           #8AA7DC;  /* 6.93:1 sobre --fv-surface */
  --fv-primary-hover:     #B5C9EC;
  --fv-primary-active:    #DAE5F7;
  --fv-primary-subtle:    #13213D;
  --fv-primary-on:        #0C1628;  /* texto escuro sobre botão claro */
  --fv-primary-on-subtle: #B5C9EC;

  --fv-accent:           #EAA96E;
  --fv-accent-hover:     #F4CAA4;
  --fv-accent-active:    #FAE6D2;
  --fv-accent-subtle:    #2C160A;
  --fv-accent-on:        #2C160A;
  --fv-accent-on-subtle: #EAA96E;

  --fv-success:        #54C08D;
  --fv-success-subtle: #12281E;
  --fv-warning:        #E5A93F;
  --fv-warning-subtle: #2C2110;
  --fv-danger:         #F0897F;
  --fv-danger-subtle:  #2E1512;
  --fv-info:           #8AA7DC;
  --fv-info-subtle:    #13213D;

  --fv-focus-ring:   #8AA7DC;
  --fv-focus-shadow: 0 0 0 3px rgba(138, 167, 220, 0.35);

  --fv-chart-1: #8AA7DC;
  --fv-chart-2: #EAA96E;
  --fv-chart-3: #54C08D;
  --fv-chart-4: #4FC0D4;
  --fv-chart-5: #B49AE6;
  --fv-chart-6: #9BA6B5;
  --fv-chart-grid: #2C3548;
  --fv-chart-axis: #7E8A9B;

  --fv-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --fv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38);
  --fv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.44);
  --fv-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.50);
  --fv-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.58);

  --fv-sidebar-bg:          linear-gradient(180deg, #161D2C 0%, #0B111C 100%);
  --fv-sidebar-text:        rgba(237, 241, 245, 0.72);
  --fv-sidebar-text-active: #FFFFFF;
  --fv-sidebar-hover:       rgba(255, 255, 255, 0.06);
  --fv-sidebar-active:      rgba(255, 255, 255, 0.10);
  --fv-sidebar-marker:      #EAA96E;
  --fv-sidebar-divider:     rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fv-bg: #0E1420;              --fv-surface: #161D2C;
    --fv-surface-raised: #1F273A;  --fv-surface-sunken: #101725;
    --fv-surface-inverse: #EDF1F5;
    --fv-border: #2C3548;          --fv-border-strong: #3B4660;
    --fv-border-subtle: #1F273A;
    --fv-text: #EDF1F5;            --fv-text-muted: #A9B4C4;
    --fv-text-subtle: #7E8A9B;     --fv-text-inverse: #232830;
    --fv-primary: #8AA7DC;         --fv-primary-hover: #B5C9EC;
    --fv-primary-active: #DAE5F7;  --fv-primary-subtle: #13213D;
    --fv-primary-on: #0C1628;      --fv-primary-on-subtle: #B5C9EC;
    --fv-accent: #EAA96E;          --fv-accent-hover: #F4CAA4;
    --fv-accent-active: #FAE6D2;   --fv-accent-subtle: #2C160A;
    --fv-accent-on: #2C160A;       --fv-accent-on-subtle: #EAA96E;
    --fv-success: #54C08D;         --fv-success-subtle: #12281E;
    --fv-warning: #E5A93F;         --fv-warning-subtle: #2C2110;
    --fv-danger: #F0897F;          --fv-danger-subtle: #2E1512;
    --fv-info: #8AA7DC;            --fv-info-subtle: #13213D;
    --fv-focus-ring: #8AA7DC;
    --fv-focus-shadow: 0 0 0 3px rgba(138, 167, 220, 0.35);
    --fv-chart-1: #8AA7DC;  --fv-chart-2: #EAA96E;  --fv-chart-3: #54C08D;
    --fv-chart-4: #4FC0D4;  --fv-chart-5: #B49AE6;  --fv-chart-6: #9BA6B5;
    --fv-chart-grid: #2C3548; --fv-chart-axis: #7E8A9B;
    --fv-shadow-xs: 0 1px 2px rgba(0,0,0,.30);
    --fv-shadow-sm: 0 1px 3px rgba(0,0,0,.38);
    --fv-shadow-md: 0 4px 12px rgba(0,0,0,.44);
    --fv-shadow-lg: 0 12px 28px rgba(0,0,0,.50);
    --fv-shadow-xl: 0 24px 56px rgba(0,0,0,.58);
    --fv-sidebar-bg: linear-gradient(180deg, #161D2C 0%, #0B111C 100%);
    --fv-sidebar-text: rgba(237,241,245,.72);
    --fv-sidebar-text-active: #FFFFFF;
    --fv-sidebar-hover: rgba(255,255,255,.06);
    --fv-sidebar-active: rgba(255,255,255,.10);
    --fv-sidebar-marker: #EAA96E;
    --fv-sidebar-divider: rgba(255,255,255,.08);
  }
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */
:root {
  --fv-font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --fv-font-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fv-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Escala modular ~1.25. tamanho / entrelinha / peso / tracking */
  --fv-display:   700 3rem/1.08 var(--fv-font-display);      /* 48 */
  --fv-h1:        600 2.375rem/1.15 var(--fv-font-display);  /* 38 */
  --fv-h2:        600 1.875rem/1.2 var(--fv-font-display);   /* 30 */
  --fv-h3:        600 1.5rem/1.3 var(--fv-font-display);     /* 24 */
  --fv-h4:        600 1.25rem/1.35 var(--fv-font-display);   /* 20 */
  --fv-body-lg:   400 1.125rem/1.6 var(--fv-font-text);      /* 18 */
  --fv-body:      400 1rem/1.6 var(--fv-font-text);          /* 16 */
  --fv-body-sm:   400 0.875rem/1.55 var(--fv-font-text);     /* 14 */
  --fv-caption:   500 0.8125rem/1.45 var(--fv-font-text);    /* 13 */
  --fv-overline:  600 0.75rem/1.4 var(--fv-font-text);       /* 12 */

  --fv-tracking-display: -0.025em;
  --fv-tracking-heading: -0.015em;
  --fv-tracking-body:     0;
  --fv-tracking-overline: 0.08em;
}

/* Números de dinheiro, quilometragem e contagem: sempre tabulares, para
   que as colunas alinhem e o olho compare de cima a baixo. */
.fv-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Placa, chassi, código de anúncio, ID de integração. */
.fv-code {
  font-family: var(--fv-font-mono);
  font-size: 0.9375em;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   5. ESPAÇAMENTO, RAIO, MOVIMENTO
   -------------------------------------------------------------------------- */
:root {
  --fv-space-1:  0.25rem;   /*  4 */
  --fv-space-2:  0.5rem;    /*  8 */
  --fv-space-3:  0.75rem;   /* 12 */
  --fv-space-4:  1rem;      /* 16 */
  --fv-space-5:  1.25rem;   /* 20 */
  --fv-space-6:  1.5rem;    /* 24 */
  --fv-space-8:  2rem;      /* 32 */
  --fv-space-10: 2.5rem;    /* 40 */
  --fv-space-12: 3rem;      /* 48 */
  --fv-space-16: 4rem;      /* 64 */
  --fv-space-20: 5rem;      /* 80 */
  --fv-space-24: 6rem;      /* 96 */

  --fv-radius-xs:   6px;
  --fv-radius-sm:   8px;
  --fv-radius-md:  12px;
  --fv-radius-lg:  16px;
  --fv-radius-xl:  24px;
  --fv-radius-full: 999px;

  /* Movimento. Nada passa de 400ms: acima disso, o sistema parece lento,
     não sofisticado. */
  --fv-duration-fast:   120ms;
  --fv-duration-normal: 200ms;
  --fv-duration-slow:   320ms;
  --fv-ease-out: cubic-bezier(0.2, 0, 0, 1);      /* entrada de elementos */
  --fv-ease-in:  cubic-bezier(0.4, 0, 1, 1);      /* saída de elementos */
  --fv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* transformações no lugar */

  --fv-sidebar-width:     260px;
  --fv-sidebar-collapsed:  72px;
  --fv-header-height:      70px;
  --fv-content-max:      1280px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fv-duration-fast: 1ms;
    --fv-duration-normal: 1ms;
    --fv-duration-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   6. FOCO — regra única, não sobrescrever por componente
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fv-focus-ring);
  outline-offset: 2px;
  border-radius: var(--fv-radius-xs);
}

/* ==========================================================================
   7. PONTE DE MIGRAÇÃO  —  AutoControle → Fidavia
   Cole este bloco no topo do style.css existente para trocar a marca sem
   reescrever nenhum componente. Depois vá removendo as variáveis antigas
   à medida que os arquivos forem migrados para os tokens --fv-*.
   ========================================================================== */
:root {
  --verde-principal:  var(--fv-primary);         /* #2E7D32 → #2E4C8A */
  --verde-claro:      var(--fv-primary-hover);   /* #4CAF50 → #243B6D */
  --verde-escuro:     var(--fv-primary-active);  /* #1B5E20 → #1B2D53 */
  --verde-bg:         var(--fv-primary-subtle);  /* #E8F5E9 → #EFF4FC */
  --azul-secundario:  var(--fv-info);            /* #1976D2 → #2E4C8A */
  --azul-claro:       var(--fv-blu-400);         /* #42A5F5 → #5E82C6 */
  --azul-escuro:      var(--fv-blu-900);         /* #0D47A1 → #13213D */
  --acento:           var(--fv-accent);          /* #FF9800 → #C4702A */
  --acento-hover:     var(--fv-accent-hover);    /* #F57C00 → #A55A21 */
  --laranja-acento:   var(--fv-accent-active);   /* #E64A19 → #84471B */
  --cinza-neutro:     var(--fv-text);            /* #37474F → #232830 */
  --cinza-claro:      var(--fv-text-muted);      /* #78909C → #5B6573 */
  --cinza-fundo:      var(--fv-bg);              /* #F5F7FA → #F6F8FA */
  --cinza-borda:      var(--fv-border);          /* #E0E0E0 → #D8DFE7 */
  --branco:           var(--fv-surface);         /* #FFFFFF → surface     */
  --erro:             var(--fv-danger);          /* #D32F2F → #A8241D */
  --sucesso:          var(--fv-success);         /* #388E3C → #1B6E47 */
  --alerta:           var(--fv-warning);         /* #FFA000 → #8F5B12 */

  --shadow-sm: var(--fv-shadow-sm);
  --shadow-md: var(--fv-shadow-md);
  --shadow-lg: var(--fv-shadow-lg);
  --shadow-xl: var(--fv-shadow-xl);

  --sidebar-width:     var(--fv-sidebar-width);
  --sidebar-collapsed: var(--fv-sidebar-collapsed);
  --header-height:     var(--fv-header-height);

  --transition-fast:   var(--fv-duration-fast) var(--fv-ease-out);
  --transition-normal: var(--fv-duration-normal) var(--fv-ease-out);
  --transition-slow:   var(--fv-duration-slow) var(--fv-ease-out);

  --radius-sm: var(--fv-radius-sm);
  --radius-md: var(--fv-radius-md);
  --radius-lg: var(--fv-radius-lg);
  --radius-xl: var(--fv-radius-xl);
}

/* Dois pontos do style.css atual precisam de ajuste manual — as variáveis
   sozinhas não resolvem, porque o valor está escrito direto na regra:

   .sidebar { background: linear-gradient(180deg, var(--verde-principal) 0%,
                                          var(--verde-escuro) 100%); }
     →  background: var(--fv-sidebar-bg);

   .header-search input:focus,
   .form-control:focus { box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1); }
     →  box-shadow: var(--fv-focus-shadow);

   E a família tipográfica: trocar 'Montserrat' por var(--fv-font-display)
   e 'Open Sans' por var(--fv-font-text).                                   */