/* ============================================================
   FreedomV2 — Design Tokens
   Fonte da verdade de cor, espaçamento, tipografia, raio e sombra.
   Tudo em custom properties — nada aqui gera classes utilitárias
   (isso fica em utilities.css / components.css).
   ============================================================ */

/* Base menor que o padrão do navegador (16px) — como toda a escala de
   texto e espaçamento é em rem, isso encolhe texto E padding juntos de
   forma proporcional em todas as páginas v2 de uma vez, sem precisar
   tocar em cada componente. */
html { font-size: 14px; }

/* Trava a rolagem horizontal na página inteira — todo conteúdo largo
   (tabela, barra de abas, badges da topbar) já tem seu próprio
   overflow-x:auto num wrapper interno; se algum elemento escapar um
   pouco da viewport por subpixel/flex, isso vira uma barra de rolagem
   horizontal fantasma no body inteiro em vez de ficar contida ali. */
html, body { overflow-x: hidden; }

:root {

  /* ---- Cor primária ----
     Base no noite (#170A33), o fundo do menu lateral do cliente, escolhido
     em 2026-10-06 como "o roxo certo" no lugar do #460897 antigo. Os tons
     claros saem do lilás (#A98BEF), o acento da marca sobre escuro: é o
     mesmo par do menu, noite com lilás. A escala antiga era o violeta do
     Tailwind (#7c3aed, #a78bfa...), que não existe no manual de marca.

     O 800 é MAIS CLARO que a base, ao contrário do nome: é a cor de hover
     do botão primário, e escurecer o noite não daria diferença visível. */
  --fv-primary-50:  #F7F5FD;
  --fv-primary-100: #EFEAFC;
  --fv-primary-200: #E0D6F9;
  --fv-primary-300: #C8B6F4;
  --fv-primary-400: #A98BEF; /* lilás: texto e realce sobre fundo escuro */
  --fv-primary-500: #6B4FB8;
  --fv-primary-600: #3B2370;
  --fv-primary-700: #170A33; /* base: noite */
  --fv-primary-800: #2C1A52; /* hover do primário */
  --fv-primary-900: #0E0620;

  /* Item ativo de menu, abas e seletores: a mesma cor que o item ativo do
     menu lateral mostra na tela (lilás a 18% sobre o noite), com texto
     branco e ícone lilás. Fica como cor sólida para dar igual sobre fundo
     branco, onde o lilás translúcido viraria um tom claro diferente. */
  --fv-ativo-bg:    #312155;
  --fv-ativo-texto: #FFFFFF;
  --fv-ativo-icone: #A98BEF;

  /* Letra sobre fundo --fv-primary (botão primário, aba ativa, chip ligado).
     Branca no claro; no escuro o primário vira lilás e a letra vira noite.
     Com o branco fixo, o botão do modo escuro ficava lilás com letra branca,
     ilegível. Use sempre este token, nunca #fff, em cima do primário. */
  --fv-on-primary: #FFFFFF;

  /* ---- Accent (verde-azulado, base #14b8a6) ---- */
  --fv-accent-50:  #f0fdfa;
  --fv-accent-100: #ccfbf1;
  --fv-accent-200: #99f6e4;
  --fv-accent-300: #5eead4;
  --fv-accent-400: #2dd4bf;
  --fv-accent-500: #14b8a6; /* base */
  --fv-accent-600: #0d9488;
  --fv-accent-700: #0f766e;
  --fv-accent-800: #115e59;
  --fv-accent-900: #134e4a;

  /* ---- Semânticas ----
     O passo 400 existe para TEXTO colorido sobre fundo escuro: no dark
     mode o 500/600 não alcança contraste 4.5:1 em fonte pequena. */
  --fv-success-50:  #f0fdf4;
  --fv-success-100: #dcfce7;
  --fv-success-400: #4ade80;
  --fv-success-500: #22c55e;
  --fv-success-600: #16a34a;
  --fv-success-700: #15803d;

  --fv-danger-50:  #fef2f2;
  --fv-danger-100: #fee2e2;
  --fv-danger-400: #f87171;
  --fv-danger-500: #ef4444;
  --fv-danger-600: #dc2626;
  --fv-danger-700: #b91c1c;

  --fv-warning-50:  #fffbeb;
  --fv-warning-100: #fef3c7;
  --fv-warning-400: #fbbf24;
  --fv-warning-500: #f59e0b;
  --fv-warning-600: #d97706;
  --fv-warning-700: #b45309;

  --fv-info-50:  #eef2ff;
  --fv-info-100: #e0e7ff;
  --fv-info-400: #818cf8;
  --fv-info-500: #6366f1;
  --fv-info-600: #4f46e5;
  --fv-info-700: #3730a3;

  /* ---- Neutros (slate) ---- */
  --fv-gray-50:  #f8fafc;
  --fv-gray-100: #f1f5f9;
  --fv-gray-200: #e2e8f0;
  --fv-gray-300: #cbd5e1;
  --fv-gray-400: #94a3b8;
  --fv-gray-500: #64748b;
  --fv-gray-600: #475569;
  --fv-gray-700: #334155;
  --fv-gray-800: #1e293b;
  --fv-gray-900: #0f172a;

  /* ---- Espaçamento (4px por unidade) ---- */
  --fv-space-0: 0;
  --fv-space-1: 0.25rem;   /* 4px */
  --fv-space-2: 0.5rem;    /* 8px */
  --fv-space-3: 0.75rem;   /* 12px */
  --fv-space-4: 1rem;      /* 16px */
  --fv-space-5: 1.25rem;   /* 20px */
  --fv-space-6: 1.5rem;    /* 24px */
  --fv-space-8: 2rem;      /* 32px */
  --fv-space-10: 2.5rem;   /* 40px */
  --fv-space-12: 3rem;     /* 48px */
  --fv-space-16: 4rem;     /* 64px */
  --fv-space-20: 5rem;     /* 80px */
  --fv-space-24: 6rem;     /* 96px */

  /* ---- Tipografia ---- */
  --fv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fv-text-xs:   0.75rem;
  --fv-text-sm:   0.875rem;
  --fv-text-base: 1rem;
  --fv-text-lg:   1.125rem;
  --fv-text-xl:   1.25rem;
  --fv-text-2xl:  1.5rem;
  --fv-text-3xl:  1.875rem;
  --fv-text-4xl:  2.25rem;

  --fv-leading-xs:   1rem;
  --fv-leading-sm:   1.25rem;
  --fv-leading-base: 1.5rem;
  --fv-leading-lg:   1.75rem;
  --fv-leading-xl:   1.75rem;
  --fv-leading-2xl:  2rem;
  --fv-leading-3xl:  2.25rem;
  --fv-leading-4xl:  2.5rem;

  --fv-font-normal:   400;
  --fv-font-medium:   500;
  --fv-font-semibold: 600;
  --fv-font-bold:     700;
  --fv-font-extrabold: 800;

  /* ---- Raio de borda (Soft Modern) ---- */
  --fv-radius-sm:   6px;
  --fv-radius-md:   10px;
  --fv-radius-lg:   14px;
  --fv-radius-xl:   18px;
  --fv-radius-2xl:  22px;
  --fv-radius-full: 9999px;

  /* ---- Sombra (suave) ---- */
  --fv-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --fv-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --fv-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ---- Semânticos de superfície (mudam no dark mode) ---- */
  --fv-bg:          var(--fv-gray-50);
  --fv-surface:     #ffffff;
  --fv-surface-alt: var(--fv-gray-50);
  --fv-text:        var(--fv-gray-900);
  --fv-text-muted:  var(--fv-gray-500);
  --fv-border:      var(--fv-gray-200);

  --fv-primary: var(--fv-primary-700);
  --fv-accent:  var(--fv-accent-600);

  /* ---- Shell (sidebar sempre escuro, independe do tema do conteúdo) ---- */
  --fv-sidebar-bg:        #170A33; /* noite, o mesmo do menu do cliente */
  --fv-sidebar-bg-alt:    #231243;
  --fv-sidebar-text:      #c7c1d6;
  --fv-sidebar-text-muted: #786f8f;
  --fv-sidebar-active-bg: var(--fv-primary-600);
  --fv-sidebar-active-text: #ffffff;
  --fv-sidebar-border:    rgba(255, 255, 255, 0.06);
  --fv-sidebar-width:     248px;
  --fv-sidebar-width-collapsed: 76px;
  --fv-topbar-height:     68px;
}

/* ============================================================
   Dark mode — ativado via <html data-theme="dark">
   ============================================================ */
:root[data-theme="dark"] {
  /* Paleta do escuro saída do noite, como a página do manual de marca no
     modo escuro (fundo noite, superfícies #231243 e #2C1A52, fio #4A3A75).
     O fundo da página fica um tom abaixo do noite (#0E0620) para o menu e as
     colunas de lista, que são noite, se destacarem dele. Os tons antigos
     (#0f0b1a, #1a1425) eram um roxo-preto que brigava com o noite do menu. */
  --fv-bg:          #0E0620;
  --fv-surface:     #231243;
  --fv-surface-alt: #2C1A52;
  --fv-text:        #F1F0F5;
  --fv-text-muted:  #ABA3C9;
  --fv-border:      #3A2C66;

  --fv-primary: var(--fv-primary-400);
  --fv-on-primary: #170A33;
  --fv-accent:  var(--fv-accent-400);

  --fv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --fv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --fv-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}