/* ============================================================
   TOKENS — Design system aprovado (v2.3)
   Novo Centro de Oncologia · Hospital São Vicente Curitiba
   ============================================================ */

@font-face {
  font-family: 'Barlow';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/Barlow-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/Barlow-SemiBold.ttf') format('truetype');
}

:root {
  /* --- Paleta oficial --- */
  --c-magenta: #E9407C;
  --c-coral:   #F26D3F;
  --c-orange:  #F5A02A;
  --c-yellow:  #F8C93A;
  --c-violet:  #7B4F9E;
  --c-indigo:  #3B4A9F;

  --grad-brand: linear-gradient(90deg,
    var(--c-magenta) 0%,
    var(--c-coral)   22%,
    var(--c-orange)  42%,
    var(--c-yellow)  55%,
    var(--c-violet)  78%,
    var(--c-indigo)  100%
  );

  /* Mesmo espectro no eixo vertical — para barras/elementos verticais, onde
     o gradiente deve correr no sentido do próprio elemento. */
  --grad-brand-v: linear-gradient(180deg,
    var(--c-magenta) 0%,
    var(--c-coral)   22%,
    var(--c-orange)  42%,
    var(--c-yellow)  55%,
    var(--c-violet)  78%,
    var(--c-indigo)  100%
  );

  /* --- Neutros --- */
  --paper:      #F8F5F0;
  --paper-2:    #F1EDE5;
  --ink:        #1F263A;
  --ink-2:      #29364C;
  --ink-muted:  #6E7080;
  --rule:       #E4DFD5;

  /* --- Tipografia --- */
  --font-body:  'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Times New Roman', Times, serif;
  --font-mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Escala tipográfica (fluid) --- */
  --fs-display:  clamp(56px, 8vw, 120px);
  --fs-headline: clamp(40px, 5vw, 72px);
  --fs-title:    clamp(28px, 3vw, 40px);
  --fs-subhead:  clamp(18px, 2vw, 22px);
  --fs-body:     17px;
  --fs-label:    11px;

  /* --- Layout --- */
  --pad-x:       clamp(24px, 5vw, 80px);
  --pad-y:       clamp(64px, 10vw, 128px);
  --measure:     65ch;

  /* --- Arredondamento ---
     UM valor para toda mídia e todo card da página: o card da hero, o vídeo
     institucional aberto, os cards da órbita, as fotos do passeio, os cards
     dos pilares, a galeria, o retrato da citação e o frame do CTA.
     Ancorado no raio do card da hero, que é a referência visual da peça.
     Mexer aqui muda a página inteira de uma vez — é esse o ponto. */
  --r-media: 28px;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-io:     cubic-bezier(.7, 0, .3, 1);
}

/* Dark mode — reservado; a LP começa em light-first.
   Se quisermos ativar dark: descomentar. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171F;
    --paper-2: #1B1F29;
    --ink: #F0EDE5;
    --ink-2: #D9D4C8;
    --ink-muted: #8C8F9E;
    --rule: #2A2F3D;
  }
}
*/