@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap");

/* Cognvox — tokens do design system.
   Gerado a partir de tokens.json. Tema claro é o padrão.
   Para o tema escuro, use data-theme="dark" em <html> ou em um contêiner. */

:root {
  --surface: #FFFFFF;
  --surface-soft: #F3F5F8;
  --surface-raised: #FFFFFF;
  --line: #C4CAD3;
  --line-strong: #8A93A2;
  --surface-tint: #E6E9F0;
  --ink: #0D154C;
  --ink-muted: #5E6673;
  --action: #6C2BD9;
  --on-action: #FFFFFF;
  --action-soft: #EFE8FC;
  --focus-ring: #6C2BD9;
  --success: #1E7A46;
  --success-soft: #E6F4EC;
  --warning: #8A5A00;
  --warning-soft: #FFF4D6;
  --danger: #C62828;
  --danger-soft: #FDECEC;
  --brand-azul-cognvox: #0D154C;
  --brand-roxo: #6C2BD9;
  --brand-magenta: #EB288C;
  --brand-laranja: #FF6F00;
  --brand-amarelo: #FFC100;
  --brand-azul-claro: #00B4D8;
  --brand-grafite: #212529;
  --brand-cinza-medio: #757E8A;
  --brand-cinza-claro: #D8DCE2;
  --brand-cinza-suave: #F3F5F8;
  --brand-branco: #FFFFFF;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(13,21,76,0.12), 0 2px 6px rgba(13,21,76,0.08);
  --shadow-md: 0 8px 24px rgba(13,21,76,0.16), 0 2px 6px rgba(13,21,76,0.08);
  --shadow-glow: 0 0 32px rgba(108,43,217,0.25);

  --gradient-arco-iris: linear-gradient(90deg, #5A16E1 0%, #E8188D 25%, #FC6A00 50%, #FEBF01 75%, #01B3DB 100%);
  --gradient-linha: linear-gradient(90deg, #01B2DB 0%, #FEBF00 25%, #FC6A00 50%, #E9188D 75%, #5A17E1 100%);
  --gradient-principal: linear-gradient(90deg, #000146 0%, #5A16E3 50%, #EA188D 100%);
  --gradient-energia: linear-gradient(90deg, #FE6A00 0%, #FEBF01 100%);
  --gradient-conexao: linear-gradient(90deg, #00B0D9 0%, #000147 100%);
}

[data-theme="dark"] {
  --surface: #0D154C;
  --surface-soft: #141C5C;
  --surface-raised: #1A2366;
  --line: #38429A;
  --line-strong: #7580D0;
  --surface-tint: #232C78;
  --ink: #FFFFFF;
  --ink-muted: #B9BED6;
  --action: #B69CF5;
  --on-action: #0D154C;
  --action-soft: #2A2270;
  --focus-ring: #B69CF5;
  --success: #6BD49A;
  --success-soft: #123D2B;
  --warning: #FFC100;
  --warning-soft: #3D3210;
  --danger: #FF8A8A;
  --danger-soft: #4A1620;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 32px rgba(182,156,245,0.30);
}

/* Estilos de texto */
.cx-type-display { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.01em; }
.cx-type-h1 { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 800; }
.cx-type-h2 { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; }
.cx-type-h3 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; }
.cx-type-h4 { font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 500; }
.cx-type-card-title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.cx-type-key-info { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 600; }
.cx-type-value { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 700; }
.cx-type-overline { font-family: var(--font-display); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.cx-type-label { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 500; }
.cx-type-body-lg { font-family: var(--font-body); font-size: 17px; line-height: 28px; font-weight: 400; }
.cx-type-body { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 400; }
.cx-type-body-strong { font-family: var(--font-body); font-size: 15px; line-height: 24px; font-weight: 600; }
.cx-type-data { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-type-small { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 400; }
.cx-type-caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 500; }