/* ==========================================================================
   tokens.css — única fonte de cor, tipografia, espaçamento, raio e layout
   Miriane Souza Advocacia e Consultoria
   Nenhum valor literal deve existir fora deste arquivo.
   ========================================================================== */

:root {
  /* ---------- Cor · marca ---------- */
  --c-grafite:      #1F1B16;
  --c-sepia:        #5A4A38;
  --c-ambar:        #8A5A12;
  --c-ambar-claro:  #D9A441;

  /* ---------- Cor · semânticas ---------- */
  --c-sucesso:      #1E6B4A;
  --c-erro:         #9E2A24;   /* só validação de formulário */

  /* ---------- Cor · plantão (derivada da marca, não do erro) ---------- */
  --c-plantao:        var(--c-grafite);        /* fundo: faixa, card e botão de plantão */
  --c-plantao-acento: var(--c-ambar-claro);    /* sobre --c-plantao: 7,61:1 */

  /* identidade da NewStyle Marketing: só no crédito do rodapé, nunca no layout do site */
  --ns-laranja: #FB933C;   /* sobre --n900: 8,17:1 */

  /* ---------- Cor · rampa neutra quente ---------- */
  --n0:   #FFFFFF;
  --n50:  #FAF8F5;
  --n100: #F1EEE8;
  --n200: #E3DED5;
  --n300: #C8C1B4;
  --n400: #9C9385;
  --n500: #6E6659;
  --n600: #524B40;
  --n700: #3A342B;
  --n800: #26211A;
  --n900: #171410;

  /* ---------- Sombra ---------- */
  --sombra-card:      0 1px 2px rgba(31, 27, 22, .06);
  --sombra-tela:      0 2px 12px rgba(31, 27, 22, .12);
  --sombra-flutuante: 0 4px 16px rgba(31, 27, 22, .30);

  /* ---------- Tipografia ---------- */
  --ff-titulo: 'Cormorant Garamond', Georgia, serif;
  --ff-corpo:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:   'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --fs-display: 64px;
  --fs-h1:      48px;
  --fs-h1-int:  48px;
  --fs-h2:      36px;
  --fs-h2-sec:  40px;
  --fs-h2-int:  30px;
  --fs-h3:      30px;
  --fs-h4:      20px;
  --fs-marca:   22px;   /* nome no cabeçalho e no rodapé */
  --fs-menu:    24px;   /* links do menu no celular */
  --fs-pergunta: 24px;  /* títulos de lista, etapas e perguntas */
  --fs-body-lg: 19px;
  --fs-body:    17px;
  --fs-ui:      16px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --fs-display-mob: 40px;
  --fs-h1-mob:      36px;

  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.2;
  --lh-h3:      1.3;
  --lh-h4:      1.35;
  --lh-body-lg: 1.65;
  --lh-body:    1.7;
  --lh-prosa:   1.75;
  --lh-small:   1.6;
  --lh-lista:   1.9;

  --fw-leve:   400;
  --fw-medio:  500;
  --fw-forte:  600;
  --fw-numero: var(--fw-forte);

  /* Cormorant Garamond não tem eixo óptico: os dois tokens ficam neutros */
  --fvs-display: normal;
  --fvs-texto:   normal;

  --ls-titulo:  -.01em;
  --ls-display: -.015em;
  --ls-caption: .18em;
  --ls-rotulo:  .14em;
  --ls-chip:    .06em;
  --ls-marca:   .14em;
  --ls-marca-sub: .26em;

  /* ---------- Espaçamento · base 8, meio-passo 4 ---------- */
  --e-1:   4px;
  --e-2:   8px;
  --e-2b: 12px;
  --e-3:  16px;
  --e-3b: 20px;
  --e-4:  24px;
  --e-5:  32px;
  --e-5b: 40px;
  --e-6:  48px;
  --e-7:  64px;
  --e-8:  96px;
  --e-9: 128px;

  /* ---------- Raio ---------- */
  --r-0:    0;
  --r-1:    2px;
  --r-pill: 28px;
  --r-circulo: 50%;   /* indicador do accordion */

  /* ---------- Layout ---------- */
  --container:     1160px;
  --container-txt: 820px;
  /* ch da Outfit = largura do "0", maior que o caractere médio: 48ch ≈ 62–68 caracteres por linha */
  --medida-texto:  48ch;
  --medida-lead:   46ch;
  --medida-curta:  44ch;
  --coluna-artigo: 660px;   /* coluna de leitura do artigo no desktop: com corpo de 19px, até ~75 caracteres por linha (medido) */
  --altura-toque:  48px;
  --altura-campo:  52px;
  --borda:         1px;
  --filete:        2px;
  --filete-lateral: 3px;

  /* largura mínima de coluna em grades auto-fit */
  --coluna-min-sm:    240px;

  /* colunas fixas a partir de 1024px (hero) e 1280px (rodapé) */
  --hero-colunas:         7fr 5fr;
  --hero-colunas-inverso: 5fr 7fr;
  --colunas-intro:        5fr 7fr;   /* seção dividida: introdução | conteúdo */
  --etapa-colunas:        var(--e-6) minmax(0, 1fr);
  --pergunta-numero:      var(--e-5);
  --pergunta-colunas:     var(--pergunta-numero) minmax(0, 1fr) auto;
  --rodape-colunas-lg:   repeat(3, auto);   /* navegação | contato | atendimento, distribuídas */
  --artigo-card-colunas: 5fr 7fr;

  /* retrato como plano de fundo (hero, "Quem atende", Sobre) */
  --plano-inicio:    50%;                  /* a foto começa na metade da seção, depois do fim do texto */
  --plano-largura:   58%;                  /* e sangra além da borda: a mão erguida cai fora da coluna de texto */
  --plano-altura:    min(86vh, 760px);     /* altura mínima da seção com foto no desktop */
  --plano-dissolve:  62%;                  /* onde a foto fica opaca, medido a partir do texto: a mão erguida some */
  --plano-dissolve-centro: 22%;            /* fotos com o rosto no centro: o dissolve não pode chegar ao rosto */
  --plano-proporcao-mob: 4 / 5;            /* celular: foto vertical, mostra o corpo até a cintura */
  --plano-altura-mob: 62vh;                 /* teto da foto no tablet, para não ocupar a tela toda */
  --plano-proporcao: 3 / 4;                /* caixa vertical: a foto 2:3 aparece com o tronco, sem zoom no rosto */
  --plano-topo:      6%;                   /* dissolve do topo, curto: não pode cobrir o cabelo */
  --plano-largura-max: 960px;              /* em tela larga a foto para de crescer, e o rosto não estoura */
  --plano-borda:     12%;                  /* dissolve da borda externa, quando a foto não chega à janela */
  --plano-respiro:   var(--e-6);           /* faixa de grafite acima da cabeça no desktop */
  --plano-base:      24%;                  /* dissolve da base, medido de baixo para cima */

  /* ritmo vertical de seção */
  --secao-y:    var(--e-6);   /* mobile */
  --secao-y-md: var(--e-7);   /* a partir de 600px */
  --secao-y-lg: var(--e-8);   /* a partir de 1024px */

  /* botão flutuante de WhatsApp */
  --icone:             var(--e-4);

  /* ---------- Imagem ---------- */
  /* retrato em preto e branco com viés quente puxado para a sépia (HANDOFF §6), sem alterar o arquivo */
  --filtro-retrato: grayscale(.3) sepia(.12) saturate(.9) contrast(1.1) brightness(1.03);   /* cor quente contida */

  /* ---------- Camada ---------- */
  --z-flutuante: 20;
  --z-cabecalho: 30;

  /* ---------- Foco ---------- */
  --foco-cor:    var(--c-ambar);
  --foco-largura: 2px;
  --foco-offset:  3px;

  /* ---------- Transição ---------- */
  --transicao: .15s ease;
}

/* Breakpoints (mobile-first) — referência para os media queries.
   Exceção documentada: CSS não aceita var() dentro de @media, por isso
   599px, 600px, 768px, 1024px e 1280px aparecem literais em base.css e components.css.
   base  ate 599px  · 4 colunas  · gutter var(--e-3) · margem var(--e-4)
   sm    600px      · 8 colunas  · gutter var(--e-4) · margem var(--e-5b)
   md    1024px     · 12 colunas · gutter var(--e-5) · margem var(--e-7)
   lg    1280px     · 12 colunas · container var(--container) centrado      */