/* =============================================================
   Dra. Solange Marin C. Tuoni: Oftalmologista, Mauá
   Design tokens. Ponto único de cor e de tipografia do site.

   Paleta desta marca (vocabulário semântico próprio, do brief):
     marfim       #EDE9E3  fundo principal
     nevoa        #D3D8D6  superfície de apoio
     azul-marin   #3E5C6E  primária: display, botões, links
     profundeza   #1F3340  seções escuras, footer
     coral-vivo   #C97B63  acento quente, rótulos e detalhes
     tinta-suave  #202A2E  texto principal

   Os tokens derivados abaixo foram calculados a partir desses seis
   valores com a fórmula WCAG de luminância relativa (não estimados
   a olho). O contraste de cada par texto/fundo em uso está anotado
   ao lado; mínimo AA de 4.5:1 para texto de corpo, 3:1 para texto
   grande (≥ 24px ou ≥ 19px em negrito).
   ============================================================= */

:root {
  /* ---------- Cor: superfícies ---------- */
  --marfim:       #ede9e3;  /* fundo principal, conforme brief */
  --marfim-rgb:   237, 233, 227;
  --nevoa:        #d3d8d6;  /* superfície de apoio, conforme brief: placeholder de mídia, faixas discretas */
  --branco:       #ffffff;  /* cards */

  /* ---------- Cor: marca ---------- */
  --azul-marin:   #3e5c6e;  /* primária, conforme brief. 5.85:1 sobre --marfim como texto/link */
  --azul-marin-800: #35505f; /* hover do botão e do link escurecido */
  --profundeza:   #1f3340;  /* brief: seções escuras, footer. 10.8:1 com --marfim em cima */
  --coral-vivo:   #c97b63;  /* acento quente, conforme brief. Só decorativo: 2.7:1 sobre --marfim, não serve como texto */
  --coral-forte:  #9c4f38;  /* o mesmo acento, escurecido até 4.83:1 sobre --marfim:
                                é ESTE que vira texto, número de passo ou ícone no claro */
  --coral-pale:   #e8b9a6;  /* acento legível sobre escuro: 7.42:1 sobre --profundeza */
  --coral-wash:   #ece0d8;  /* lavagem quente e clara, para painel de fundo atrás de ilustração ou card */

  /* ---------- Cor: texto ---------- */
  --tinta-suave:  #202a2e;  /* texto principal, conforme brief. 12.1:1 sobre --marfim */
  --tinta-media:  #4b5a63;  /* texto secundário: 5.89:1 sobre --marfim (AA) */

  /* ---------- Céu do hero (gradiente literal do brief) ---------- */
  --sky-top:      #1f3340;
  --sky-bottom:   #d3d8d6;
  --sky-stop:     84%;

  /* Véu de leitura. Brief: opacidade mínima 0.55 na faixa em que o texto
     vive. Medido: com o pico do véu abaixo de 0.55 a ênfase do título cai
     perto do limite AA sobre o degradê já claro por baixo do meio da tela.
     O pico aqui fica em 0.60 na faixa de leitura (20% a 70% da altura do
     herói) e afrouxa nas pontas, onde não há texto nem legenda. */
  --sky-veil:     rgba(32, 42, 46, 0.60);

  /* ---------- Cor: semânticos ---------- */
  --bg:            var(--marfim);
  --surface:       var(--branco);
  --fg:            var(--tinta-suave);
  --fg-muted:      var(--tinta-media);
  --fg-on-dark:    #ede9e3;                        /* 10.8:1 sobre --profundeza */
  --fg-on-dark-mu: rgba(237, 233, 227, 0.78);      /*  7.2:1 sobre --profundeza */
  --border:        rgba(32, 42, 46, 0.12);
  --border-strong: rgba(32, 42, 46, 0.22);
  --accent:        var(--azul-marin);
  --dark-section:  var(--profundeza);

  --inset-hairline: rgba(32, 42, 46, 0.06) 0 0 0 1px inset;

  /* ---------- Tipografia ----------
     Sem serif e sem itálico neste site. O display é a Epilogue (elegância
     sem afetação, contraste ótico sutil que sustenta título grande com
     serenidade), o corpo é a Nunito Sans (cantos levemente suavizados,
     boa leitura para criança e para idoso na mesma página), e a Martian
     Mono marca kickers, números de registro e rótulos. A ênfase do
     display se faz por COR e PESO, nunca por inclinação. */
  --font-display: 'Epilogue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, Menlo, monospace;

  --display-weight:      500;
  --display-emph-style:  normal;      /* regra dura: nenhum itálico no site */
  --display-emph-color:  var(--azul-marin);
  --display-emph-weight: 700;

  /* Escala fluida entre mobile e desktop */
  --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem);     /* hero  34 a 60px */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);         /* 32 a 52px */
  --t-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);     /* 28 a 42px */
  --t-h3:      clamp(1.5rem, 1.28rem + 0.95vw, 2rem);        /* 24 a 32px */
  --t-h4:      clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 a 26px */
  --t-h5:      1.375rem;                                     /* 22px */
  --t-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 a 19px */
  --t-body:    1.0625rem;                                    /* 17px */
  --t-sm:      1rem;                                         /* 16px */
  --t-xs:      0.875rem;                                     /* 14px */
  --t-stat:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);

  --lh-display: 1.06;
  --lh-tight:   1.14;
  --lh-snug:    1.28;
  --lh-body:    1.4;
  --lh-relaxed: 1.45;
  --lh-loose:   1.6;
  --lh-prose:   1.68;   /* corpo longo: a página respira, como a consulta */

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-caps:    0.09em;

  --otf: 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on;

  /* ---------- Espaçamento (escala 8) ---------- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    10px;
  --sp-lg:    12px;
  --sp-xl:    16px;
  --sp-2xl:   20px;
  --sp-3xl:   24px;
  --sp-4xl:   32px;
  --sp-5xl:   48px;
  --sp-6xl:   64px;
  --sp-7xl:   96px;

  --section-y: clamp(72px, 8vw, 140px);
  --gutter:    clamp(20px, 4vw, 64px);
  --maxw:      1280px;
  --maxw-text: 62ch;

  /* ---------- Raios ---------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 24px;
  --r-card: 24px;
  --r-pill: 999px;

  /* ---------- Movimento ----------
     Eases e springs herdados da engenharia do template. Não renomear:
     js/main.js depende deles para o reveal em spring e para o parallax. */
  --ease-brand:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-drift:  cubic-bezier(0.34, 0.64, 0.34, 1);
  --ease-snap:   cubic-bezier(0.27, 0, 0.51, 1);
  --dur-fast:    0.2s;
  --dur-base:    0.4s;
  --dur-slow:    1s;
  --dur-cinema:  2s;
}

/* Breakpoints do template (preservados):
   mobile  até 699.98px
   tablet    700px a 1199.98px
   desktop a partir de 1200px                                  */