/* ============================================================
   IP Soluções - Design System unificado · Tokens canônicos
   Fonte ÚNICA de verdade visual de apps/sites internos da IP.
   Tema escuro único · paleta de fogo brasileira.

   Direção (decisão do Italo, ADR-007):
     • Brandbook OFICIAL em tudo (cores de marca, neutros, tipografia).
     • EXCEÇÃO pragmática: cores de STATUS adotam o kit mais legível
       do app financeiro (melhor leitura em tema escuro).
   Origem dos valores oficiais:
     operacao/projetos/ip-solucoes/contexto/marca/design.md
   Origem da escala madura (spacing/raios/sombras) e dos status:
     apps/financeiro/src/styles/colors_and_type.css
   ============================================================ */

:root {
  /* ============================================================
     MARCA - paleta de fogo (oficial - design.md)
     ============================================================ */
  --brand:        #E85002;   /* laranja IP · brand.action - CTA, link, ação primária (oficial - design.md) */
  --brand-deep:   #C10801;   /* vinho · brand.deepRed - hover/pressed do CTA (oficial - design.md) */
  --brand-amber:  #F16001;   /* âmbar · brand.amber - glow de hero, badge ao-vivo (oficial - design.md) */
  --brand-sand:   #D9C3AB;   /* areia · brand.sand - acento humano, badges "IA"/"automatizado" (oficial - design.md) */

  /* Derivados do laranja para preenchimentos/bordas suaves */
  --brand-tint:   rgba(232, 80, 2, 0.12);   /* fill sutil */
  --brand-tint-2: rgba(232, 80, 2, 0.18);   /* fill em hover */
  --brand-border: rgba(232, 80, 2, 0.38);   /* borda de marca */

  /* ============================================================
     NEUTROS - escala dark oficial (oficial - design.md)
     Canvas → superfícies → bordas → textos.
     ============================================================ */
  --bg-app:        #0E0E0E;   /* canvas dark padrão · neutral.900 (oficial - design.md) */
  --bg-surface:    #1F1F1F;   /* cards & superfície elevada · neutral.800 (oficial - design.md) */
  --bg-surface-2:  #242424;   /* nested/hover - derivado da escala neutral */
  --border:        #333333;   /* hairline/borda · neutral.700 (oficial - design.md) */

  --fg-1: #FAFAFA;   /* texto primário · neutral.50 (oficial - design.md) */
  --fg-2: #A7A7A7;   /* texto secundário/muted · neutral.400 (oficial - design.md) */
  --fg-3: #646464;   /* texto subtle/captions · neutral.500 (oficial - design.md) */
  --fg-on-brand: #FFFFFF;

  /* ============================================================
     STATUS - (exceção: legibilidade - kit financeiro)
     Escolha pragmática: melhor contraste/leitura em tema escuro.
     ============================================================ */
  --positive:        #34D399;   /* receita/saldo+ (exceção: legibilidade - kit financeiro) */
  --positive-tint:   rgba(52, 211, 153, 0.12);
  --positive-border: rgba(52, 211, 153, 0.32);

  --warning:         #FBBF24;   /* aviso (exceção: legibilidade - kit financeiro) */
  --warning-tint:    rgba(251, 191, 36, 0.12);
  --warning-border:  rgba(251, 191, 36, 0.34);

  --negative:        #FF6B6B;   /* despesa/erro/vencida (exceção: legibilidade - kit financeiro) */
  --negative-tint:   rgba(255, 107, 107, 0.12);
  --negative-border: rgba(255, 107, 107, 0.34);

  --info:            #5B9BFF;   /* neutro/aberta (exceção: legibilidade - kit financeiro) */
  --info-tint:       rgba(91, 155, 255, 0.12);
  --info-border:     rgba(91, 155, 255, 0.34);

  /* ============================================================
     TIPOGRAFIA - fontes oficiais (oficial - design.md)
     Space Grotesk (títulos) · Inter (corpo) · JetBrains Mono (números)
     ============================================================ */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;          /* títulos/hero/CTAs (oficial - design.md) */
  --font-ui:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* corpo/UI (oficial - design.md) */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;     /* números/métricas/eyebrow (oficial - design.md) */

  /* ============================================================
     SPACING (base 4px) - escala madura portada do financeiro
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ============================================================
     RAIOS - escala portada do financeiro
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ============================================================
     SOMBRAS / ELEVAÇÃO - portadas do financeiro (calibradas p/ dark)
     ============================================================ */
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised:  0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ring-brand:     0 0 0 3px rgba(232, 80, 2, 0.28);   /* anel de foco de marca */
  --ring-focus:     0 0 0 3px rgba(91, 155, 255, 0.4);  /* anel de foco neutro/info */
}