/* ==========================================================================
   MS Growth — contrato do design system
   NENHUMA cor literal fora deste arquivo.

   TRES REGRAS SEMANTICAS, nao negociaveis:
     mint  = dado / ROI / resultado positivo
     azul  = marca / acao
     amber = atencao / filtro de porte
   Um unico botao verde ou um unico numero azul destroi o codigo visual
   que e a assinatura do deck.

   TRES ARMADILHAS MEDIDAS:
     --color-data-strong  como TEXTO em claro = 2,65:1  FILL-ONLY
     --color-accent       como TEXTO em claro = 2,04:1  FILL-ONLY
     --color-primary      como fundo de botao = 4,63:1  use --color-cta-strong
   Texto verde -> --color-data-ink. Texto amber -> --color-accent-ink.

   PISO DA PALETA: --color-text-muted sobre --color-bg-alt = 5,23:1.
   Nao clarear texto secundario alem disso (folga de apenas 16% sobre AA).
   ========================================================================== */

:root {
  color-scheme: light;

  /* Tipografia — familia unica; o contraste de peso cria a hierarquia,
     o que economiza um request. */
  --font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Azul — marca e acao ---------------------------------------------------- */
  --color-primary: #2E6BF5;          /* FILL / icone / anel. Texto so >=24px ou >=18.66px bold */
  --color-primary-dark: #1442C8;     /* TEXTO azul padrao. 7,95:1 sobre branco */
  --color-primary-deeper: #0F35A3;   /* hover de acao */
  --color-primary-deep: #1E3A8A;     /* navy do gradiente do logo real */
  --color-secondary: #5B8DF9;        /* FILL only, 3,17:1. Sem consumidor hoje — candidato a remocao */
  --color-primary-tint: #E3ECFE;
  --color-primary-tint-strong: #CFE0FD;
  --color-brand-logo: #1D4ED8;       /* DOC: azul dentro do SVG do logo. NAO e token de UI */

  /* CTA -------------------------------------------------------------------- */
  --color-cta-strong: #1442C8;       /* FUNDO do botao. label branco = 7,95:1 AAA */
  --color-cta-darker: #0F35A3;       /* hover, 10,20:1 */
  --color-cta: #2E6BF5;              /* glow / anel do pulso */
  --color-cta-grad-end: #2A5FE0;
  --color-cta-text: #FFFFFF;

  /* Mint — dado / ROI ------------------------------------------------------ */
  --color-data: #34E0A1;             /* SO sobre escuro. 10,46:1 sobre --color-dark */
  --color-data-strong: #17B57C;      /* FILL-ONLY */
  --color-data-ink: #075C3E;         /* TEXTO de dado em claro. 8,05:1 */
  --color-data-tint: #E4F8EF;
  --color-data-border: #A7E8CB;

  /* Amber — atencao / filtro ---------------------------------------------- */
  --color-accent: #F5A524;           /* FILL-ONLY em claro; como texto so sobre escuro */
  --color-accent-ink: #7A4A00;       /* TEXTO amber em claro. 7,48:1 */
  --color-accent-tint: #FFF3DF;
  --color-accent-border: #F7D9A4;

  /* Superficies claras ----------------------------------------------------- */
  --color-bg: #F7F9FC;               /* off-white com tinta azul, nao branco puro */
  --color-bg-alt: #EEF3FB;           /* pior caso de contraste do corpo */
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F1F5FC;

  /* Texto ------------------------------------------------------------------ */
  --color-heading: #0A1733;          /* 17,75:1 */
  --color-text: #223250;             /* 12,80:1 */
  --color-text-muted: #54658A;       /* PISO: 5,23:1 sobre bg-alt */

  /* Bordas ----------------------------------------------------------------- */
  --color-border: #DCE4F2;           /* hairline DECORATIVA */
  --color-border-mid: #C3D0E8;       /* hairline DECORATIVA */
  --color-border-strong: #6E85AE;    /* quando a borda E o unico indicador de controle (3,73:1) */

  /* Blocos escuros — unico lugar onde o mint vibrante e acessivel ---------- */
  --color-dark: #0A1730;
  --color-dark-alt: #14224A;
  --color-dark-border: rgba(255, 255, 255, 0.12);
  --color-on-dark: #EAF0FB;
  --color-on-dark-muted: #A2B3D2;
  --color-on-dark-link: #9EC0FF;
  --color-footer-bg: #0A1730;
  --theme-color: #FFFFFF;

  /* Escala de tipo --------------------------------------------------------- */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.8vw, 1.6rem);
  --fs-2xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  --fs-3xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-hero-num: clamp(2rem, 1.2rem + 6vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Espaco ----------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Sombras — tinta trocada de teal para o navy da marca ------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 23, 48, 0.06), 0 1px 3px rgba(10, 23, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 23, 48, 0.08), 0 2px 4px rgba(10, 23, 48, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(10, 23, 48, 0.22);
  --shadow-print: 0 24px 60px -18px rgba(10, 23, 48, 0.45), 0 4px 12px rgba(10, 23, 48, 0.10);

  --ring-focus: 0 0 0 3px rgba(46, 107, 245, 0.35);
  --cta-pulse: rgba(46, 107, 245, 0.45);
  --frame-pad: 0.75rem;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 68px;
  --header-h-mobile: 60px;

  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-modal: 50;

  /* Impressao — a folha do #resumo vai ao socio ou ao financeiro. Preto sobre
     branco de verdade: tinta de marca em impressora monocromatica vira cinza
     lavado, e este e o unico documento da pagina feito para sair no papel. */
  --print-ink: #000000;
  --print-bg: #FFFFFF;
  --print-muted: #444444;
}