/* ==========================================================================
   CLÍNICA CANEVER — tokens de marca
   v1.4 · gerado a partir de tokens.json
   Fonte da verdade: 01_Manual_de_Marca/Manual_Identidade_Visual_Clinica_Canever.pdf

   Como usar: importe este arquivo uma vez, antes do seu CSS.
       @import url("brand.css");

   REGRA QUE NÃO PODE SER QUEBRADA
   O Dourado Principal (--cor-dourado) NUNCA é cor de texto sobre fundo claro:
   dá 2,9:1 e reprova a WCAG AA. Para texto sobre claro use --cor-dourado-profundo.
   Sobre fundo escuro o Dourado Principal é livre, inclusive em texto (7,3:1).
   Detalhes na página 10 do manual.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTE — Asap (variável: um arquivo cobre pesos 300–900 e larguras 75–125%)
   Auto-hospedada de propósito. NÃO troque pelo CDN do Google: ele envia o IP
   de cada visitante para servidores do Google, o que é um problema de LGPD
   num site de clínica.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Asap";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fontes/asap-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Asap";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fontes/asap-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback com métricas ajustadas: evita o "pulo" do texto enquanto a fonte
   carrega. Se der trabalho, pode remover — é refinamento, não requisito. */
@font-face {
  font-family: "Asap Fallback";
  src: local("Arial");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- cores de marca (FIXAS — não altere) --- */
  --cor-dourado:            #A89A30;
  --cor-dourado-profundo:   #7C6E20;
  --cor-dourado-escuro:     #635819;
  --cor-preto:              #000000;
  --cor-marfim:             #F5F1E6;

  /* --- texto --- */
  --cor-texto:              #1A1A1A;
  --cor-texto-2:            #5F5F5A;
  --cor-texto-3:            #666666;
  --cor-texto-invertido:    #FFFFFF;
  --cor-texto-desligado:    #8A8A85;

  /* --- superfícies --- */
  --cor-fundo:              #FFFFFF;
  --cor-fundo-sutil:        #FAF8F2;
  --cor-fundo-marfim:       #F5F1E6;
  --cor-fundo-escuro:       #000000;
  --cor-fundo-escuro-2:     #141412;

  /* --- bordas --- */
  --cor-borda:              #DDDAD0;
  --cor-borda-media:        #C4C0B2;
  --cor-borda-escura:       #3A3A36;

  /* --- semânticas --- */
  --cor-link:               #5C5318;
  --cor-link-visitado:      #4A4214;
  --cor-erro:               #B3261E;
  --cor-erro-fundo:         #FDF2F1;
  --cor-sucesso:            #2E6B4F;
  --cor-sucesso-fundo:      #F0F7F3;
  --cor-aviso:              #8A5A00;
  --cor-aviso-fundo:        #FDF6E8;
  --cor-foco:               #7C6E20;

  /* --- botão primário --- */
  --btn-fundo:              #A89A30;
  --btn-texto:              #000000;   /* preto sobre dourado = 7,3:1 */
  --btn-hover:              #7C6E20;
  --btn-hover-texto:        #FFFFFF;
  --btn-ativo:              #635819;
  --btn-off-fundo:          #E3E0D4;
  --btn-off-texto:          #8A8A85;

  /* --- tipografia --- */
  --fonte-titulo:           "Asap", "Asap Fallback", "Arial Narrow", Arial, sans-serif;
  --fonte-texto:            "Asap", "Asap Fallback", Arial, Helvetica, sans-serif;
  --largura-condensada:     80%;
  --largura-normal:         100%;

  --texto-display:          clamp(2.5rem, 5vw, 3.75rem);
  --texto-h1:               clamp(2rem, 4vw, 2.75rem);
  --texto-h2:               clamp(1.5rem, 3vw, 2rem);
  --texto-h3:               1.25rem;
  --texto-corpo-g:          1.125rem;
  --texto-corpo:            1rem;
  --texto-pequeno:          0.875rem;
  --texto-micro:            0.8125rem;

  --entrelinha-titulo:      1.1;
  --entrelinha-corpo:       1.65;
  --entrelinha-curta:       1.4;
  --tracking-titulo:        -0.01em;
  --tracking-sobrescrito:   0.16em;

  /* --- espaço, raio, sombra --- */
  --e-1: 0.25rem;  --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-6: 1.5rem;   --e-8: 2rem;    --e-12: 3rem;   --e-16: 4rem;  --e-24: 6rem;

  --raio-sm: 4px;  --raio-md: 6px;  --raio-lg: 10px;  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(0,0,0,.06);
  --sombra-md: 0 4px 14px rgba(0,0,0,.08);
  --sombra-lg: 0 12px 32px rgba(0,0,0,.12);

  /* --- layout --- */
  --largura-max:      1200px;
  --largura-leitura:  68ch;
  --alvo-toque:       44px;
}

/* --------------------------------------------------------------------------
   3. SEÇÃO ESCURA
   Aplique a classe .tema-escuro num container (ou no <body>) e os tokens de
   texto/fundo se invertem — inclusive a liberação do dourado como cor de texto.
   -------------------------------------------------------------------------- */
.tema-escuro {
  --cor-fundo:           #000000;
  --cor-fundo-sutil:     #141412;
  --cor-fundo-marfim:    #141412;
  --cor-texto:           #FFFFFF;
  --cor-texto-2:         #C7C7C0;
  --cor-texto-3:         #9A9A93;
  --cor-borda:           #3A3A36;
  --cor-borda-media:     #4A4A44;
  --cor-link:            #A89A30;   /* aqui o Dourado Principal É permitido */
  --cor-link-visitado:   #C0B44F;
  --cor-foco:            #A89A30;
  --btn-hover:           #C0B44F;
  --btn-hover-texto:     #000000;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--fonte-texto);
  font-stretch: var(--largura-normal);
  font-size: var(--texto-corpo);
  line-height: var(--entrelinha-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titulo {
  font-family: var(--fonte-titulo);
  font-stretch: var(--largura-condensada);   /* é isto que dá o ar do logotipo */
  font-weight: 700;
  line-height: var(--entrelinha-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--cor-texto);
  text-wrap: balance;
}
h1 { font-size: var(--texto-h1); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); }

p { max-width: var(--largura-leitura); }

/* Eyebrow em caixa alta, como no manual */
.sobrescrito {
  font-family: var(--fonte-titulo);
  font-stretch: var(--largura-condensada);
  font-weight: 700;
  font-size: var(--texto-pequeno);
  letter-spacing: var(--tracking-sobrescrito);
  text-transform: uppercase;
  color: var(--cor-dourado-profundo);
}
.tema-escuro .sobrescrito { color: var(--cor-dourado); }

/* --------------------------------------------------------------------------
   5. FOCO POR TECLADO — obrigatório. Não remova, não troque por outline:none.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* --------------------------------------------------------------------------
   6. LINKS
   Dentro de texto corrido o link é sublinhado. Cor sozinha não basta:
   quem não distingue cores precisa de outro sinal.
   -------------------------------------------------------------------------- */
a { color: var(--cor-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--cor-link-visitado); }
a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   7. BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo-toque);
  padding: var(--e-3) var(--e-6);
  border: none; border-radius: var(--raio-md);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo); font-weight: 700; line-height: 1;
  text-decoration: none;          /* .btn também é usado em <a> */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primario { background: var(--btn-fundo); color: var(--btn-texto); }
.btn-primario:hover { background: var(--btn-hover); color: var(--btn-hover-texto); }
.btn-primario:active { background: var(--btn-ativo); color: #fff; }
.btn-primario:disabled { background: var(--btn-off-fundo); color: var(--btn-off-texto); cursor: not-allowed; }

.btn-secundario {
  background: transparent;
  color: var(--cor-dourado-profundo);
  box-shadow: inset 0 0 0 1.5px var(--cor-dourado-profundo);
}
.btn-secundario:hover { background: var(--cor-marfim); }
.tema-escuro .btn-secundario {
  color: var(--cor-dourado);
  box-shadow: inset 0 0 0 1.5px var(--cor-dourado);
}
.tema-escuro .btn-secundario:hover { background: rgba(168,154,48,.12); }

/* --------------------------------------------------------------------------
   8. MENSAGENS DE SISTEMA
   -------------------------------------------------------------------------- */
.msg { padding: var(--e-3) var(--e-4); border-radius: var(--raio-md); border-left: 3px solid; }
.msg-erro    { color: var(--cor-erro);    background: var(--cor-erro-fundo);    border-color: var(--cor-erro); }
.msg-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); }
.msg-aviso   { color: var(--cor-aviso);   background: var(--cor-aviso-fundo);   border-color: var(--cor-aviso); }

/* --------------------------------------------------------------------------
   9. RESPEITAR QUEM PEDE MENOS MOVIMENTO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}