/* ============================================================
   QUIZ-INFO — Design Tokens
   Identidade: fintech-clean BR (Nubank/Mercado Pago finish).
   Base fria #F6F7FB + emerald-teal; CTA âmbar com texto ink
   (dark-on-vivid, ~10.2:1). Todos os pares de texto ≥ AA.
   ============================================================ */

:root {
  /* Backgrounds */
  --qi-bg: #F6F7FB;
  --qi-surface: #FFFFFF;

  /* Ink (texto) — sobre bg: 16.5:1 / soft 7.0:1 / muted só p/ ícones,
     placeholders e texto decorativo (3.1:1 — nunca copy essencial) */
  --qi-ink: #10182B;
  --qi-ink-soft: #4B5568;
  --qi-muted: #8A94A6;

  /* Navy institucional — âncora de header, hero e tela de análise */
  --qi-navy: #0A1E42;
  --qi-navy-800: #0D2552;
  --qi-navy-soft: rgba(10, 30, 66, .08);       /* tiles/fundos sobre claro */
  --qi-on-navy: #FFFFFF;                        /* 16.4:1 sobre navy */
  --qi-on-navy-soft: rgba(255, 255, 255, .74);  /* ~9.4:1 sobre navy */
  --qi-on-navy-faint: rgba(255, 255, 255, .10); /* pills/tracks sobre navy */
  --qi-on-navy-line: rgba(255, 255, 255, .16);  /* hairlines sobre navy */
  --qi-progress-grad: linear-gradient(90deg, #FFB800, #0E9F6E);

  /* Brand — emerald → teal */
  --qi-brand: #0E9F6E;
  --qi-brand-deep: #0B7A56;   /* texto brand pequeno: 5.3:1 no branco */
  --qi-brand-soft: #E6F6EF;
  --qi-brand-grad: linear-gradient(90deg, #0E9F6E, #14B8A6);

  /* CTA — âmbar + texto ink (contraste 10.2:1) */
  --qi-cta: #FFB800;
  --qi-cta-hover: #F0AD00;
  --qi-cta-ink: #10182B;

  /* State */
  --qi-danger: #DC2626;       /* 4.8:1 no branco */

  /* Focus */
  --qi-focus: #0E9F6E;

  /* Shape — 12 inputs · 16 opções · 20 cards · 999 pills */
  --qi-radius-input: 12px;
  --qi-radius-option: 16px;
  --qi-radius-card: 20px;
  --qi-radius-pill: 999px;

  /* Shadows (2 camadas: contato + ambiente) */
  --qi-shadow-sm: 0 1px 2px rgba(16, 24, 43, .06), 0 4px 12px rgba(16, 24, 43, .06);
  --qi-shadow-md: 0 2px 4px rgba(16, 24, 43, .05), 0 12px 32px rgba(16, 24, 43, .10);

  /* Hairline */
  --qi-hairline: rgba(16, 24, 43, .08);

  /* Typography — self-hosted (fonts/), zero requests externos.
     @font-face: inline no index.html (URLs versionadas ?v=__QIV__)
     e no _preview.html. */
  --qi-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qi-font-display: 'Plus Jakarta Sans', var(--qi-font);

  /* Motion */
  --qi-ease: cubic-bezier(.22, .61, .36, 1);

  /* Compat: aliases legados (código antigo referencia estes) */
  --qi-radius: var(--qi-radius-input);
  --qi-shadow: var(--qi-shadow-sm);
  --qi-warn: var(--qi-danger);
}