/* ==========================================================================
   Contato Indenizações — Design Tokens v2.0 "Confiança"
   Fonte da verdade da v2. Prefixo: --ct-   (mesmo da v1, para facilitar a migração)

   O que NÃO mudou em relação à v1: logo, nome, famílias tipográficas
   (Poppins + Inter) e cores principais (#EA3334 e #3E4095).
   O que mudou está marcado com  [v2]  — ver TENDENCIAS-E-DECISOES.md.

   Camadas (W3C DTCG 2025.10):
   1. Primitivos  → escalas geradas em OKLCH, ancoradas nos hex da marca.
   2. Semânticos  → papéis. Componentes só usam esta camada.
   3. Componentes → decisões específicas.

   Modos [v2]:  padrão (claro) · alto contraste · texto ampliado
     <html data-contrast="high">   ou  @media (prefers-contrast: more)
     <html data-text="large">
   A v2 é deliberadamente "claro primeiro": não há tema escuro (ver decisão D-07).

   Fontes (Google Fonts) [v2: sem o peso 200 · 7 pesos no total, antes 11]:
   https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Poppins:wght@400;600;900&display=swap
   ========================================================================== */

/* Fontes de reserva calibradas [v2]: Arial/Roboto ajustadas às métricas de Poppins e Inter,
   para a troca de fonte no carregamento não empurrar o layout (CLS). */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica"); ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------ */
  /* 1. PRIMITIVOS — escalas OKLCH [v2]                                  */
  /* ------------------------------------------------------------------ */

  /* Vermelho · âncora #EA3334 = oklch(61.2% 0.218 26.3) */
  --ct-red-50:  #FFF4F3;
  --ct-red-100: #FFE4E1;
  --ct-red-200: #FFCAC6;
  --ct-red-300: #FFA098;
  --ct-red-400: #F86E67;
  --ct-red-500: #EA3334; /* COR PRINCIPAL — inalterada */
  --ct-red-600: #CC2224; /* vermelho de ação: 5,5:1 com branco */
  --ct-red-700: #AF0F15;
  --ct-red-800: #900006;
  --ct-red-900: #6F0002;
  --ct-red-950: #4B0000;
  --ct-red-logo: #ED1B24; /* exclusivo do logotipo — cor exata do arquivo oficial (assets/logo-contato.svg) */

  /* Índigo · âncora #3E4095 = oklch(41.9% 0.137 277.7) */
  --ct-indigo-50:  #F3F4FF;
  --ct-indigo-100: #E4E7F6;
  --ct-indigo-200: #CACFEA;
  --ct-indigo-300: #A7AED9;
  --ct-indigo-400: #7980BE;
  --ct-indigo-500: #3E4095; /* COR PRINCIPAL — inalterada */
  --ct-indigo-600: #333480;
  --ct-indigo-700: #2A2A70;
  --ct-indigo-800: #201F5E;
  --ct-indigo-900: #17154C;
  --ct-indigo-950: #0D0936;

  /* Neutros tingidos de índigo (croma baixo, mesmo matiz 277.7) */
  --ct-neutral-0:   #FFFFFF;
  --ct-neutral-25:  #FAFBFD;
  --ct-neutral-50:  #F5F5FA;
  --ct-neutral-100: #EBECF3;
  --ct-neutral-200: #DCDDE6;
  --ct-neutral-300: #C4C7D2;
  --ct-neutral-400: #9B9EAB;
  --ct-neutral-500: #777988; /* 4,3:1 — só ícones/bordas, nunca texto */
  --ct-neutral-600: #575A69;
  --ct-neutral-700: #3F4150;
  --ct-neutral-800: #282A38;
  --ct-neutral-900: #141520;
  --ct-neutral-950: #090A13;

  /* Acolhimento [v2]: neutro levemente quente para seções emocionais */
  --ct-warm-50:  #FFF8F7;
  --ct-warm-100: #FEF2EF;

  /* Funcionais */
  --ct-green-50:  #E4F8E7;
  --ct-green-700: #1D7D3E;
  --ct-amber-50:  #FEF0D4;
  --ct-amber-700: #986600;
  --ct-whatsapp:  #25D366;
  --ct-star:      #F6B400;
  --ct-star-empty: #C4C7D2; /* estrela vazia sobre fundo claro */

  /* ------------------------------------------------------------------ */
  /* 2. SEMÂNTICOS                                                        */
  /* ------------------------------------------------------------------ */
  --ct-brand-primary:   var(--ct-red-500);
  --ct-brand-secondary: var(--ct-indigo-500);

  /* Texto */
  --ct-text:          var(--ct-neutral-900);
  --ct-text-muted:    var(--ct-neutral-700); /* [v2] mais escuro que na v1: 10:1 */
  --ct-text-subtle:   var(--ct-neutral-600);
  --ct-text-inverse:  var(--ct-neutral-0);
  --ct-text-display:  var(--ct-red-500);     /* punch ≥ 24 px */
  --ct-text-accent:   var(--ct-red-600);
  --ct-text-heading:  var(--ct-indigo-500);
  --ct-text-link:     var(--ct-indigo-500);
  --ct-text-link-hover: var(--ct-red-600);

  /* Ação [v2]: botão sólido (sem gradiente) em vermelho de ação */
  --ct-action:          var(--ct-red-600);
  --ct-action-hover:    var(--ct-red-700);
  --ct-action-pressed:  var(--ct-red-800);
  --ct-action-text:     var(--ct-neutral-0);
  --ct-action-secondary:      var(--ct-indigo-500);
  --ct-action-secondary-soft: var(--ct-indigo-50);

  /* Superfícies [v2]: planas, sem gradiente */
  --ct-bg:              var(--ct-neutral-0);
  --ct-surface:         var(--ct-neutral-0);
  --ct-surface-subtle:  var(--ct-neutral-50);
  --ct-surface-sunken:  var(--ct-neutral-100);
  --ct-surface-warm:    var(--ct-warm-50);   /* depoimentos, "você não está sozinho" */
  --ct-surface-brand:   var(--ct-red-500);   /* faixas de marca com texto ≥ 24 px */
  --ct-surface-brand-soft: var(--ct-red-50);
  --ct-surface-institutional: var(--ct-indigo-500);
  --ct-surface-institutional-soft: var(--ct-indigo-50);
  --ct-surface-inverse: var(--ct-indigo-900);

  /* Bordas */
  --ct-border:         var(--ct-neutral-200);
  --ct-border-strong:  var(--ct-neutral-400);
  --ct-border-input:   var(--ct-neutral-500);  /* 4,3:1 — passa 3:1 de componente */
  --ct-border-accent:  var(--ct-red-600);
  --ct-focus-ring:     var(--ct-indigo-500);
  --ct-focus-halo:     var(--ct-indigo-200);

  /* Estados — sempre com ícone + texto */
  --ct-success:    var(--ct-green-700);
  --ct-success-bg: var(--ct-green-50);
  --ct-warning:    var(--ct-amber-700);
  --ct-warning-bg: var(--ct-amber-50);
  --ct-danger:     var(--ct-red-700);
  --ct-danger-bg:  var(--ct-red-50);
  --ct-info:       var(--ct-indigo-500);
  --ct-info-bg:    var(--ct-indigo-50);

  /* Fotografia */
  --ct-overlay-photo: rgba(9, 10, 19, 0.55);

  /* ------------------------------------------------------------------ */
  /* TIPOGRAFIA — mesmas famílias, uso ajustado [v2]                      */
  /* ------------------------------------------------------------------ */
  --ct-font-display: "Poppins", "Poppins Fallback", Arial, sans-serif;
  --ct-font-body:    "Poppins", "Poppins Fallback", Arial, sans-serif;
  --ct-font-ui:      "Inter", "Inter Fallback", Arial, sans-serif;

  --ct-weight-light:   300; /* só Inter no lead ≥ 24 px */
  --ct-weight-regular: 400; /* [v2] corpo passa de 300 para 400 */
  --ct-weight-semi:    600;
  --ct-weight-heavy:   800;
  --ct-weight-black:   900;

  /* Escala fluida [v2]: clamp(mobile, fluido, desktop) */
  --ct-fs-display-xl: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);  /* 40 → 60 */
  --ct-fs-display-l:  clamp(2rem, 1.5rem + 2vw, 2.625rem);     /* 32 → 42 */
  --ct-fs-display-m:  clamp(1.75rem, 1.45rem + 1.2vw, 2.125rem);/* 28 → 34 */
  --ct-fs-title-l:    clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); /* 28 → 36 */
  --ct-fs-title-m:    clamp(1.375rem, 1.2rem + .7vw, 1.625rem); /* 22 → 26 */
  --ct-fs-lead:       clamp(1.375rem, 1.15rem + .9vw, 1.75rem); /* 22 → 28 */
  --ct-fs-body-l:     1.25rem;  /* 20 */
  --ct-fs-body:       1.125rem; /* 18 — [v2] padrão sobe de 16 para 18 */
  --ct-fs-body-s:     1rem;     /* 16 — mínimo para texto corrido */
  --ct-fs-caption:    0.875rem; /* 14 — mínimo absoluto */

  --ct-lh-display: 1.05;
  --ct-lh-title:   1.15;
  --ct-lh-lead:    1.3;
  --ct-lh-body:    1.6;
  --ct-measure:    60ch;        /* [v2] largura máxima de leitura */

  --ct-tracking-display: -0.01em;
  --ct-tracking-label:   0.04em;

  /* ------------------------------------------------------------------ */
  /* ESPAÇO · FORMA · PROFUNDIDADE · MOVIMENTO                            */
  /* ------------------------------------------------------------------ */
  --ct-space-1:  0.25rem;
  --ct-space-2:  0.5rem;
  --ct-space-3:  0.75rem;
  --ct-space-4:  1rem;
  --ct-space-5:  1.25rem;
  --ct-space-6:  1.5rem;
  --ct-space-8:  2rem;
  --ct-space-10: 2.5rem;
  --ct-space-12: 3rem;
  --ct-space-16: 4rem;
  --ct-space-20: clamp(3.5rem, 2.5rem + 4vw, 5rem);
  --ct-space-24: clamp(4rem, 3rem + 4vw, 6rem);

  --ct-container: 1140px;
  --ct-gutter:    clamp(1rem, 4vw, 2rem);

  /* Forma [v2]: cantos iguais nos quatro lados (a assimetria "folha" da v1 saiu — D-09) */
  --ct-radius-sm:   8px;   /* campos, marcadores pequenos */
  --ct-radius-md:   14px;  /* botões, avisos, números de etapa */
  --ct-radius-lg:   24px;  /* cards, fotos */
  --ct-radius-xl:   32px;  /* destaques: verificador, frentes, foto do hero, atendente */
  --ct-radius-pill: 999px; /* chips, botão flutuante */

  /* Alvos de toque [v2] */
  --ct-target-min: 48px;
  --ct-control-h:  56px;

  /* Profundidade tátil [v2]: sombra curta + borda interna inferior */
  --ct-shadow-tactile: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 6px 14px -8px rgba(144, 0, 6, 0.55);
  --ct-shadow-card:    0 1px 2px rgba(20, 21, 32, 0.06), 0 8px 24px -12px rgba(23, 21, 76, 0.18);
  --ct-shadow-raised:  0 2px 4px rgba(20, 21, 32, 0.06), 0 18px 40px -18px rgba(23, 21, 76, 0.32);

  /* Movimento [v2]: calmo, curto */
  --ct-duration-fast: 120ms;
  --ct-duration-base: 200ms;
  --ct-duration-slow: 320ms;
  --ct-ease:          cubic-bezier(0.2, 0, 0, 1); /* "emphasized" */

  /* ------------------------------------------------------------------ */
  /* 3. COMPONENTES                                                       */
  /* ------------------------------------------------------------------ */
  --ct-btn-fs:     1.125rem;   /* 18 */
  --ct-btn-radius: var(--ct-radius-md);
  --ct-btn-weight: 600;
  --ct-btn-pad:    0 1.75rem;
  --ct-card-pad:   clamp(1.25rem, 3vw, 2rem);
}

/* ---------- Modo: alto contraste [v2] ---------------------------------- */
@media (prefers-contrast: more) {
  :root:not([data-contrast="standard"]) {
    --ct-text-muted:   var(--ct-neutral-900);
    --ct-text-subtle:  var(--ct-neutral-800);
    --ct-text-display: var(--ct-red-700);
    --ct-text-accent:  var(--ct-red-800);
    --ct-text-heading: var(--ct-indigo-800);
    --ct-text-link:    var(--ct-indigo-800);
    --ct-action:       var(--ct-red-800);
    --ct-action-hover: var(--ct-red-900);
    --ct-border:       var(--ct-neutral-600);
    --ct-border-strong:var(--ct-neutral-900);
    --ct-border-input: var(--ct-neutral-900);
    --ct-focus-ring:   var(--ct-neutral-950);
    --ct-surface-subtle: var(--ct-neutral-0);
    --ct-surface-warm:   var(--ct-neutral-0);
    --ct-overlay-photo: rgba(9, 10, 19, 0.75);
  }
}
:root[data-contrast="high"] {
  --ct-text-muted:   var(--ct-neutral-900);
  --ct-text-subtle:  var(--ct-neutral-800);
  --ct-text-display: var(--ct-red-700);
  --ct-text-accent:  var(--ct-red-800);
  --ct-text-heading: var(--ct-indigo-800);
  --ct-text-link:    var(--ct-indigo-800);
  --ct-action:       var(--ct-red-800);
  --ct-action-hover: var(--ct-red-900);
  --ct-border:       var(--ct-neutral-600);
  --ct-border-strong:var(--ct-neutral-900);
  --ct-border-input: var(--ct-neutral-900);
  --ct-focus-ring:   var(--ct-neutral-950);
  --ct-surface-subtle: var(--ct-neutral-0);
  --ct-surface-warm:   var(--ct-neutral-0);
  --ct-overlay-photo: rgba(9, 10, 19, 0.75);
}

/* ---------- Modo: texto ampliado [v2] ---------------------------------- */
:root[data-text="large"] {
  --ct-fs-body-l:  1.5rem;   /* 24 */
  --ct-fs-body:    1.375rem; /* 22 */
  --ct-fs-body-s:  1.25rem;  /* 20 */
  --ct-fs-caption: 1.0625rem;/* 17 */
  --ct-fs-lead:    clamp(1.625rem, 1.4rem + 1vw, 2rem);
  --ct-fs-title-l: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --ct-btn-fs:     1.375rem;
  --ct-control-h:  64px;
  --ct-lh-body:    1.65;
}

/* ---------- Movimento reduzido ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ct-duration-fast: 0ms;
    --ct-duration-base: 0ms;
    --ct-duration-slow: 0ms;
  }
}