/* ============================================================
   Comparar Seguro de Viagem — Design System (tokens)
   Fonte: handoff do Claude Design (claude.ai/design), consolidado
   num único arquivo p/ evitar cadeia de @import render-blocking.
   Origem dos valores: tokens/{fonts,colors,typography,spacing,base}.css

   COMO USAR: linkar este arquivo e consumir as variáveis semânticas
   (--brand, --cta-fill, --whatsapp, --surface-soft, --radius-card…).
   ============================================================ */

/* --- Webfont: Inter (400→900) ------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* ==========================================================
     CORES — paleta base
     ========================================================== */
  /* Marca: teal (segurança/cuidado) */
  --teal-900: #063646; /* brand-deep — faixas escuras institucionais */
  --teal-800: #0a4a5f;
  --teal-700: #006b8f; /* PRIMARY brand */
  --teal-600: #0e7dd9; /* azul vivo — só como par de gradiente */
  --teal-100: #d8f5ff; /* texto claro sobre teal escuro */
  --teal-50:  #eef6f8; /* superfície tingida */

  /* Conversão: amarelo (CTA primário apenas) */
  --yellow-500: #ffcb05;
  --yellow-400: #ffd83d; /* hover */
  --yellow-ink: #082532; /* texto sobre amarelo */

  /* WhatsApp / canal humano: verde */
  --green-600: #1a8c4a;
  --green-700: #157a3e; /* hover */

  /* Neutros (rampa de tinta) */
  --ink:       #10212b; /* texto/títulos principais */
  --ink-2:     #2f4652; /* corpo secundário */
  --ink-3:     #3f5360; /* corpo terciário sobre fundo tingido */
  --muted:     #60717d; /* legendas, meta, placeholders */
  --line:      #dfe7ec; /* bordas hairline */
  --line-2:    #cbd9df; /* bordas de input */
  --paper:     #ffffff; /* superfície base */
  --soft:      #f4f8fa; /* preenchimento sutil */
  --slate-700: #27323a; /* faixa utilitária escura (logos) */

  /* Status: sucesso */
  --success:       #16835f;
  --success-text:  #07513f;
  --success-bg:    #d8f4e8;

  /* Status: info */
  --info-text: #06476b;
  --info-bg:   #d8effc;

  /* Status: aviso */
  --warn-text: #74340b;
  --warn-bg:   #ffedb5;

  /* Status: erro */
  --error:      #b42318;
  --error-text: #7b1d1d;
  --error-bg:   #fde8e8;

  /* Acentos */
  --star: #f6a600; /* estrelas de avaliação */

  /* ----- Aliases semânticos (prefira estes) ----- */
  --brand:            var(--teal-700);
  --brand-deep:       var(--teal-900);
  --accent:           var(--teal-700);

  --text-strong:      var(--ink);
  --text-body:        var(--ink-2);
  --text-muted:       var(--muted);
  --text-on-brand:    #ffffff;
  --text-on-dark:     rgba(255, 255, 255, 0.9);

  --surface:          var(--paper);
  --surface-soft:     var(--soft);
  --surface-tint:     var(--teal-50);
  --surface-dark:     var(--teal-900);
  --surface-utility:  var(--slate-700);

  --border:           var(--line);
  --border-input:     var(--line-2);
  --border-brand:     rgba(0, 107, 143, 0.42);

  --cta-fill:         var(--yellow-500);
  --cta-fill-hover:   var(--yellow-400);
  --cta-ink:          var(--yellow-ink);
  --whatsapp:         var(--green-600);
  --whatsapp-hover:   var(--green-700);

  --focus-ring:       rgba(0, 107, 143, 0.16);

  /* ==========================================================
     TIPOGRAFIA — uma família (Inter), pesos pesados (800–900)
     ========================================================== */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 650;
  --fw-bold:     800;
  --fw-heavy:    850;
  --fw-black:    900;

  --fs-eyebrow: 12px;
  --fs-caption: 13px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-body-lg: 17px;
  --fs-lead:    20px;
  --fs-h3:      20px;
  --fs-h2-sm:   27px;
  --fs-stat:    30px;
  --fs-h2:      clamp(30px, 4vw, 46px);
  --fs-h1:      clamp(44px, 5.6vw, 72px);

  --lh-tight:   0.99;
  --lh-heading: 1.07;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-relaxed: 1.65;

  --ls-eyebrow: 0.13em;
  --ls-tight:   0;
  --text-eyebrow-transform: uppercase;

  /* ==========================================================
     ESPAÇAMENTO, RAIOS, SOMBRAS
     ========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;
  --space-5:  18px;
  --space-6:  24px;
  --space-7:  26px;  /* padding de card */
  --space-8:  34px;
  --space-9:  42px;
  --space-10: 56px;
  --space-12: 78px;  /* ritmo vertical de seção */

  --gutter-section: 7vw;
  --maxw-content: 1180px;
  --maxw-prose:   720px;
  --maxw-cards:   1080px;

  --radius-control: 6px; /* inputs, botões */
  --radius-card:    8px; /* cards, modais, painéis */
  --radius-pill:    999px;
  --radius-circle:  50%;

  --border-width: 1px;

  --shadow-card:   0 16px 44px rgba(16, 33, 43, 0.06);  /* cards em repouso */
  --shadow-soft:   0 18px 50px rgba(0, 107, 143, 0.12); /* destaque/marca */
  --shadow-lift:   0 24px 70px rgba(11, 45, 59, 0.18);  /* card de cotação flutuante */
  --shadow-modal:  0 34px 90px rgba(11, 45, 59, 0.28);  /* diálogos */

  --focus-width: 3px;

  --ease-standard: ease;
  --dur-fast:   140ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;
}

/* ============================================================
   Helper opcional: a "eyebrow" da marca (label maiúsculo tracked).
   Namespaced em .ds-eyebrow p/ não colidir com CSS legado do site.
   ============================================================ */
.ds-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--brand);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}