/* Fonte de verdade de cor, fonte, espaço, raio, sombra e movimento.
   Nenhuma outra folha escreve hex, fonte ou medida de layout solta.

   As cores do anel foram amostradas do PNG de 150px (Identidade visual/MS logo (5).png).
   São APROXIMAÇÃO até o cliente mandar o vetor e a paleta oficial. */

:root {
  /* Superfícies e texto */
  --papel: #FAF9FB;
  --papel-2: #F2EEF4;
  --branco: #FFFFFF;
  --tinta: #1D1621;
  --tinta-2: #463B4A;
  --apagado: #6B6170;
  --linha: #E3DCE6;
  --linha-forte: #CFC5D3;
  --sobre-escuro: #FFFFFF;
  --sobre-escuro-2: #C9BFCC;

  /* Anel do Instituto (aproximação) */
  --anel-ameixa: #6D2559;
  --anel-vinho: #802B4C;
  --anel-cobre: #A2533A;
  --anel-caramelo: #C0752E;
  --anel-laranja: #CB8329;
  --anel-gradiente: linear-gradient(225deg, var(--anel-ameixa) 0%, var(--anel-vinho) 22%, var(--anel-cobre) 50%, var(--anel-caramelo) 74%, var(--anel-laranja) 100%);
  --anel-gradiente-vertical: linear-gradient(180deg, var(--anel-laranja) 0%, var(--anel-caramelo) 26%, var(--anel-cobre) 52%, var(--anel-vinho) 78%, var(--anel-ameixa) 100%);
  --anel-gradiente-horizontal: linear-gradient(90deg, var(--anel-laranja) 0%, var(--anel-caramelo) 26%, var(--anel-cobre) 52%, var(--anel-vinho) 78%, var(--anel-ameixa) 100%);

  /* Texto de destaque sobre fundo claro. O laranja do anel dá 3:1 e só serve para forma. */
  --ameixa-texto: #6D2559; /* 10:1 sobre --papel */
  --laranja-texto: #8F5212; /* 6:1 sobre --papel */

  /* Etapas 01–05: do laranja ao ameixa, interpoladas do anel (aproximação).
     O texto de cada uma foi escolhido para passar de 4,5:1. */
  --etapa-1: #CB8329;
  --etapa-1-texto: #1D1621;
  --etapa-2: #C47A2E;
  --etapa-2-texto: #1D1621;
  --etapa-3: #A2533A;
  --etapa-3-texto: #FFFFFF;
  --etapa-4: #873C4A;
  --etapa-4-texto: #FFFFFF;
  --etapa-5: #6D2559;
  --etapa-5-texto: #FFFFFF;

  /* Submarcas */
  --sos-vermelho: #D7322A; /* design-system-sos.md */
  --lie-marinho: #153150; /* lido do PNG da logo LIE: aproximação */
  --whatsapp: #137A43; /* verde escuro: texto branco a 5,4:1 */
  --whatsapp-hover: #0F6437;

  /* Fontes: proposta aprovada para os protótipos em 16/10/2026 */
  --fonte-display: "Unbounded", "Segoe UI", sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "DM Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Escala tipográfica */
  --t-h1: clamp(2.3rem, 1rem + 5.4vw, 5.4rem);
  --t-h2: clamp(1.75rem, 1.15rem + 2.5vw, 3rem);
  --t-h3: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  --t-lead: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  --t-corpo: 1.0625rem;
  --t-pequeno: .9375rem;
  --t-rotulo: .75rem;
  --t-gigante: clamp(5.5rem, 2rem + 24vw, 19rem);

  /* Espaço */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 72px;
  --e-9: 112px;
  --secao: clamp(72px, 4rem + 6vw, 144px);
  --margem: 20px;
  --largura: 1180px;
  --medida: 62ch;
  --cabecalho-h: 72px;
  --barra-previa-h: 40px;

  /* Raios */
  --r-1: 10px;
  --r-2: 18px;
  --r-3: 28px;
  --r-pilula: 999px;

  /* Sombras */
  --sombra-card: 0 1px 2px rgb(29 22 33 / .05), 0 14px 34px -14px rgb(29 22 33 / .16);
  --sombra-flutuante: 0 12px 30px -8px rgb(29 22 33 / .38);
  --veu: rgb(250 249 251 / .86);

  /* Movimento */
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --ease-suave: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .2s;
  --dur-2: .5s;
  --dur-3: .9s;
}

@media (min-width: 720px) {
  :root {
    --margem: 32px;
    --cabecalho-h: 84px;
  }
}

/* ---------- Submarca S.O.S. Meu Cliente Sumiu ----------
   Valores do design-system-sos.md (pasta "SOS Meu cliente sumiu"). Valem só dentro de
   .sos (o <body> da página do S.O.S.). As variáveis comuns são reapontadas aqui para o
   base.css e o rodapé de components.css seguirem a submarca sem mudança. */

.sos {
  --sos-vermelho-600: #D7322A; /* marca, ícones; texto só a partir de 24px no escuro */
  --sos-vermelho-700: #B3241D; /* texto vermelho em fundo claro */
  --sos-vermelho-400: #F0645A; /* texto vermelho em fundo escuro */
  --sos-vermelho-100: #FBE7E5;
  --sos-vermelho-tinta: #EFADA9; /* só o pedaço solto do símbolo, em fundo claro */
  --sos-vermelho-tinta-escuro: #611E1D; /* só o pedaço solto do símbolo, em fundo escuro */
  --sos-verde-700: #17803F; /* só o card "Opção 2" (botão, checks e selos passaram a vermelho) */
  --sos-verde-800: #12672F;
  --sos-verde-100: #E8F5EC;
  --sos-verde-400: #4FC27E; /* sem uso: era o check em fundo escuro */
  --sos-tinta: #131015;
  --sos-tinta-suave: #3A3138;
  --sos-apagado: #6E6670;
  --sos-apagado-escuro: #B8AFB6;
  --sos-linha: #E4DEDF;
  --sos-linha-tracejada: #C9C0C5;
  --sos-superficie: #FFFFFF;
  --sos-superficie-suave: #F6F2F0;
  --sos-superficie-escura: #131015;
  --sos-superficie-escura-2: #1E181F;
  --sos-sobre-cor: #FFFFFF;
  --sos-video-fundo: #000000; /* tela preta da VSL enquanto o vídeo não chega */

  /* Conversa de WhatsApp ilustrativa: cores dos protótipos index.html e v2 */
  --sos-chat-fundo: #F5F2EF;
  --sos-chat-topo: #EBE5E1;
  --sos-chat-entrada: #FFFFFF;
  --sos-chat-saida: #DFF1E4;
  --sos-chat-check: #3B8ED0; /* os dois tracinhos azuis de "visualizado" */

  --sos-sombra-card: 0 1px 2px rgb(19 16 21 / .06), 0 10px 28px rgb(19 16 21 / .07);
  --sos-sombra-oferta: 0 2px 4px rgb(19 16 21 / .08), 0 24px 60px rgb(19 16 21 / .16);
  --sos-sombra-cta: 0 14px 28px rgb(215 50 42 / .28);
  --sos-sombra-cta-hover: 0 10px 22px rgb(215 50 42 / .26);
  --sos-sombra-escura: 0 30px 70px -24px rgb(0 0 0 / .65); /* vídeo e prévias sobre o escuro */
  --sos-sombra-livro: 14px 14px 0 var(--sos-linha), 0 28px 45px rgb(19 16 21 / .24);
  --sos-grade-escura: rgb(255 255 255 / .04); /* quadriculado do fundo escuro */
  --sos-brilho: rgb(215 50 42 / .2); /* brilho vermelho atrás do anel */
  --sos-anel-pulso: rgb(215 50 42 / .32);
  --sos-veu-claro: rgb(255 255 255 / .9);
  --sos-veu-escuro: rgb(19 16 21 / .88);
  --sos-sombra-msg: 0 1px 1px rgb(19 16 21 / .08);
  --sos-celular-borda: #63545E; /* moldura do celular, do protótipo index.html */

  --sos-r-sm: 8px;
  --sos-r-md: 14px;
  --sos-r-lg: 22px;
  --sos-r-xl: 28px;

  --sos-texto: 720px;
  --sos-largo: 1080px;

  /* Comuns, reapontadas para a submarca */
  --papel: var(--sos-superficie);
  --papel-2: var(--sos-superficie-suave);
  --branco: var(--sos-superficie);
  --tinta: var(--sos-tinta);
  --tinta-2: var(--sos-tinta-suave);
  --apagado: var(--sos-apagado);
  --linha: var(--sos-linha);
  --linha-forte: var(--sos-linha-tracejada);
  --sobre-escuro: var(--sos-sobre-cor);
  --sobre-escuro-2: var(--sos-apagado-escuro);
  --fonte-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --t-h1: clamp(1.95rem, 1.35rem + 2.4vw, 2.9rem); /* 31px no celular, 46px no desktop */
  --t-h2: clamp(1.56rem, 1.15rem + 1.7vw, 2.125rem); /* 25px no celular, 34px no desktop */
  --t-h3: 1.25rem;
  --t-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --secao: clamp(48px, 2rem + 4vw, 88px);
  --largura: var(--sos-largo);
}

/* Variante bordô para public_html/sos-bordo.html. A página principal continua
   usando os tokens vermelhos acima sem alteração. */
.sos.sos--bordo {
  --sos-bordo-600: var(--anel-vinho);
  --sos-bordo-700: var(--ameixa-texto);
  --sos-bordo-400: #E6A4BE;
  --sos-bordo-100: #F8E8EF;
  --sos-bordo-tinta: #D9A5B8;
  --sos-bordo-tinta-escuro: #47202F;

  --sos-vermelho-600: var(--sos-bordo-600);
  --sos-vermelho-700: var(--sos-bordo-700);
  --sos-vermelho-400: var(--sos-bordo-400);
  --sos-vermelho-100: var(--sos-bordo-100);
  --sos-vermelho-tinta: var(--sos-bordo-tinta);
  --sos-vermelho-tinta-escuro: var(--sos-bordo-tinta-escuro);

  --sos-sombra-cta: 0 14px 28px rgb(128 43 76 / .28);
  --sos-sombra-cta-hover: 0 10px 22px rgb(128 43 76 / .26);
  --sos-brilho: rgb(128 43 76 / .2);
  --sos-anel-pulso: rgb(128 43 76 / .32);
}