/* ══════════════════════════════════════════════════════════════════════════
   TOKENS · Dr. Guilherme Barcelos
   Base derivada da skill lp-cinemática (referências 01-tokens.md).
   Regra estrutural: o fundo da página é UM hex; as seções são transparentes.
   Exceção deliberada: dois mundos cromáticos com corte duro (escuro ↔ papel).
   ══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── COR ───────────────────────────────────────────────────────────────
     Nunca preto puro. Viés frio deliberado (B > R), coerente com a paleta
     petróleo/teal da identidade do médico.                              */
  --tinta:            #05161A;   /* bodyBg — mundo escuro */
  --tinta-elevada:    #08222A;
  --superficie:       #0A2128;
  --superficie-2:     #0D2C35;
  --superficie-vidro: rgba(10, 40, 48, .55);

  --papel:            #F2F5F6;   /* mundo claro — corte duro */
  --papel-2:          #E4EBEC;
  --papel-3:          #D6E0E2;

  --teal-900:         #093F49;
  --teal-800:         #0A4C58;
  --teal-700:         #0D5C6B;
  --teal-600:         #116B7C;
  --teal-500:         #17879B;

  --ciano:            #29B6D1;   /* acento funcional */
  --ciano-suave:      #7FD8E8;
  --ciano-fraco:      rgba(41, 182, 209, .14);

  --ouro:             #C9A24A;   /* acento raro — regra do 1 : 40 */
  --ouro-suave:       #E0C182;

  --texto:            #E9F3F5;
  --texto-suave:      #A9C1C7;
  --texto-fraco:      #7A959C;
  --texto-escuro:     #0A2128;   /* sobre papel */
  --texto-escuro-2:   #3D585F;

  --linha:            rgba(233, 246, 248, .10);
  --linha-forte:      rgba(233, 246, 248, .18);
  --linha-escura:     rgba(10, 33, 40, .12);

  --whatsapp:         #25D366;

  /* ── TIPOGRAFIA ────────────────────────────────────────────────────── */
  --fonte-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-texto:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida. Display fecha em 88px no desktop — mediana medida do
     conjunto de referência é 90px. Line-height sub-unitário (regra: 5/6). */
  --t-display:  clamp(2.55rem, 1.05rem + 6.2vw, 5.5rem);
  --t-h2:       clamp(2rem,   1.15rem + 3.4vw, 3.75rem);
  --t-h3:       clamp(1.3rem, 1.05rem + 1vw,   1.9rem);
  --t-h4:       clamp(1.05rem, .95rem + .4vw,  1.25rem);
  --t-corpo-g:  clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --t-corpo:    1rem;
  --t-pequeno:  .875rem;
  --t-micro:    .75rem;

  --lh-display: .92;
  --lh-titulo:  1.04;
  --lh-corpo:   1.62;

  --tr-display: -.02em;   /* tracking negativo em display — regra 4/6 */
  --tr-titulo:  -.015em;
  --tr-sobrancelha: .14em;

  /* ── GRADE ─────────────────────────────────────────────────────────── */
  --largura-max:    1360px;
  --largura-texto:  62ch;
  --respiro:        72px;   /* padding lateral desktop — mediana medida */
  --respiro-mobile: 24px;   /* razão 3:1, regra medida */
  --secao-y:        clamp(88px, 11vh, 168px);

  /* ── RAIO ──────────────────────────────────────────────────────────── */
  --raio-p:  10px;
  --raio-m:  18px;
  --raio-g:  28px;
  --raio-xg: 40px;
  --raio-pilula: 999px;

  /* ── MOVIMENTO ─────────────────────────────────────────────────────────
     Três degraus de duração (regra medida) e uma família de beziers
     conjugados com saída assintótica (lição coffee-tech).               */
  --dur-rapida: .2s;
  --dur-base:   .3s;
  --dur-lenta:  .6s;
  --dur-cena:   1s;

  --ease-saida:    cubic-bezier(.36, .15, 0, .99);
  --ease-entrada:  cubic-bezier(.36, 0, .15, .99);
  --ease-expressiva: cubic-bezier(.32, .72, 0, 1);
  --ease-suave:    cubic-bezier(.4, 0, .2, 1);

  --stagger: 30ms;   /* passo medido de stagger */

  /* ── SOMBRA E LUZ ──────────────────────────────────────────────────── */
  --sombra-baixa:  0 1px 2px rgba(0,0,0,.28), 0 6px 18px -10px rgba(0,0,0,.5);
  --sombra-media:  0 12px 40px -18px rgba(0,0,0,.65), 0 2px 8px -4px rgba(0,0,0,.4);
  --sombra-alta:   0 40px 90px -40px rgba(0,0,0,.8), 0 8px 26px -14px rgba(0,0,0,.5);
  --sombra-clara:  0 22px 60px -32px rgba(10,33,40,.28), 0 2px 8px -4px rgba(10,33,40,.10);

  --brilho-ciano:  0 0 0 1px rgba(41,182,209,.30), 0 18px 50px -22px rgba(41,182,209,.55);

  /* ── CAMADAS ───────────────────────────────────────────────────────── */
  --z-fundo: 0;
  --z-conteudo: 1;
  --z-flutuante: 40;
  --z-cabecalho: 60;
  --z-menu: 70;
  --z-progresso: 80;
}

/* ── Propriedades registradas ─────────────────────────────────────────────
   Custom property não registrada é substituição de texto: o navegador
   reavalia a expressão a cada var(), a cada quadro. Registrar dá tipo ao
   valor, permite interpolação real e tira o parser do caminho quente.    */

@property --angulo-borda {   /* luz correndo pela borda de botões e cartões */
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --p {              /* progresso 0→1 da barra de capítulos do método */
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
@property --deslize-x {      /* paralaxe */
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --deslize-y {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}
@property --rato-x {         /* luz que segue o ponteiro dentro do cartão */
  syntax: '<length-percentage>';
  initial-value: 50%;
  inherits: false;
}
@property --rato-y {
  syntax: '<length-percentage>';
  initial-value: 0%;
  inherits: false;
}

@media (max-width: 860px) {
  :root {
    --respiro: var(--respiro-mobile);
    --secao-y: clamp(64px, 9vh, 104px);
  }
}