/* =============================================================
   Clinica Maki Yamaguchi, Ortopedia e Psicologia
   Design tokens. Ponto unico de cor e de tipografia do site.

   Paleta da marca (definida no brief, nao inventada):
     washi      #EDE4D3   fundo principal, o papel japones
     jade       #6FA894   acento da frente de psicologia
     indigo     #2E6E8E   primaria: display, botoes, links, ortopedia
     sumi       #1D2A33   secoes escuras, footer, a tinta
     vermelhao  #B5462F   acento unico e raro, o carimbo
     pedra      #4A5A5F   texto secundario

   Ceu do hero: #1D2A33 no topo ate #EDE4D3 embaixo, stop em 84%.

   Vocabulario semantico, nunca rampa numerica: nao existe
   --color-100 nem --blue-500 neste arquivo.

   O contraste de cada par texto/fundo em uso esta anotado ao lado.
   Minimo AA (4.5:1) para texto de corpo. Tres tons da paleta NAO
   passam como texto sobre o washi (indigo 4.45, jade 2.16,
   vermelhao 4.29): eles ficam para preenchimento, borda e desenho,
   e cada um ganha um par `-ink` rebaixado que pode virar letra.
   ============================================================= */

:root {
  /* ---------- Cor: superficies ---------- */
  --washi:        #ede4d3;  /* fundo principal, brief */
  --washi-claro:  #f6f1e6;  /* cards e superficies elevadas */
  --washi-fundo:  #e5dbc7;  /* faixas discretas, placeholder de midia */

  /* ---------- Cor: ortopedia (a frente do corpo) ---------- */
  --indigo:       #2e6e8e;  /* primaria, brief. Preenchimento e borda:
                               como TEXTO sobre --washi da 4.45:1, reprova */
  --indigo-ink:   #2b637f;  /* o mesmo azul rebaixado ate 5.21:1 sobre --washi:
                               e ESTE que pode virar texto, link ou icone no claro */
  --indigo-900:   #1c465c;  /* hover do botao escuro */
  --indigo-pale:  #b3cfdd;  /* legivel sobre --sumi (8.3:1) */
  --indigo-wash:  #dce7ed;  /* lavado, faixas de apoio da ortopedia */

  /* ---------- Cor: psicologia (a frente da escuta) ---------- */
  --jade:         #6fa894;  /* acento, brief. Decorativo, nunca texto no claro */
  --jade-ink:     #446662;  /* o mesmo verde rebaixado ate 5.01:1 sobre --washi */
  --jade-pale:    #c3d5c7;  /* 9.55:1 sobre --sumi, e a enfase do hero */
  --jade-wash:    #dfebe4;  /* lavado, faixas de apoio da psicologia */

  /* ---------- Cor: tinta ---------- */
  --sumi:         #1d2a33;  /* texto principal, 11.63:1 sobre --washi */
  --sumi-900:     #141e25;  /* footer e o fundo mais fundo */
  --pedra:        #4a5a5f;  /* texto secundario, 5.70:1 sobre --washi */

  /* ---------- Cor: o carimbo ---------- */
  --vermelhao:     #b5462f; /* acento raro, brief. Preenchimento e detalhe */
  --vermelhao-ink: #9a4130; /* 5.24:1 sobre --washi, quando precisa ser letra */

  /* ---------- Ceu do hero (gradiente literal do brief) ---------- */
  --sky-top:      #1d2a33;
  --sky-bottom:   #ede4d3;
  --sky-stop:     84%;

  /* Veu de leitura. O brief pede 0.55 no minimo; o piso real deste site e
     0.58, e o plato do miolo sobe para 0.69, porque o pior fundo do titulo
     nao e o degrade: e uma nuvem clara cruzando por tras dele. Medido nessa
     configuracao, o corpo do hero nunca cai abaixo de 5.8:1 e a enfase nunca
     abaixo de 4.2:1 na faixa em que o texto vive. Nao baixar sem medir. */
  --veu-piso:     0.58;
  --veu-miolo:    0.69;

  /* ---------- Cor: semanticos ---------- */
  --bg:            var(--washi);
  --surface:       var(--washi-claro);
  --fg:            var(--sumi);
  --fg-muted:      var(--pedra);
  --fg-on-dark:    #f6f1e6;                       /* 13.0:1 sobre --sumi */
  --fg-on-dark-mu: rgba(246, 241, 230, 0.78);     /*  8.6:1 sobre --sumi */
  --border:        rgba(29, 42, 51, 0.14);
  --border-strong: rgba(29, 42, 51, 0.26);
  --accent:        var(--indigo);
  --dark-section:  var(--sumi);

  --inset-hairline: rgba(29, 42, 51, 0.08) 0 0 0 1px inset;

  /* ---------- As duas frentes ----------
     A clinica tem duas portas, e quem procura ortopedista chega por um
     motivo oposto ao de quem procura psicologo. Cada bloco de frente troca
     estas quatro variaveis, e os componentes leem sempre as variaveis, nunca
     a cor direta. O padrao e a ortopedia. Ver `.frente--psico` em styles.css. */
  --frente:       var(--indigo);
  --frente-ink:   var(--indigo-ink);
  --frente-pale:  var(--indigo-pale);
  --frente-wash:  var(--indigo-wash);

  /* ---------- Tipografia ----------
     Sem serifa e sem italico neste site. O display e a Zen Kaku Gothic New,
     o corpo e a Noto Sans, e a M PLUS 1 Code marca kickers, horarios e
     numeros. A enfase do display se faz por COR e por PESO, nunca por
     inclinacao: a Zen Kaku e estatica, entao 500 sobe para 700 de verdade. */
  --font-display: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Noto Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'M PLUS 1 Code', ui-monospace, Menlo, monospace;

  --display-weight:      500;
  --display-emph-style:  normal;      /* regra dura: nenhum italico no site */
  --display-emph-color:  var(--indigo-ink);
  --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.08;
  --lh-tight:   1.16;
  --lh-snug:    1.3;
  --lh-body:    1.42;
  --lh-relaxed: 1.45;
  --lh-loose:   1.6;
  --lh-prose:   1.68;   /* corpo longo: a pagina respira */

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

  /* ---------- Espacamento (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 duracoes herdados da engenharia do template. Nao 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  ate 699.98px
   tablet  700px a 1199.98px
   desktop 1200px em diante                                    */