/* O que a landing acrescenta ao design system. Espelha docs/landing/melhorias-design-system.md, nome a nome.
   Hex só aqui e em tokens.css. Nada deste arquivo existe no app (web/). */

/* ---------- fontes (auto-hospedadas: numa página sobre sigilo, nenhuma visita vai a terceiros) ---------- */
@font-face {
  font-family: "Inter Variable";
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/spectral-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Fallbacks com métrica ajustada: o texto não pula quando a fonte chega (CLS ~ 0). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Spectral Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia");
  font-style: italic;
  size-adjust: 96%;
  ascent-override: 100%;
  descent-override: 40%;
  line-gap-override: 0%;
}

:root {
  /* palco: a "mesa" onde a folha branca vira papel */
  --color-palco: #eef0f3;
  --shadow-folha: 0 24px 60px rgb(15 17 21 / 10%), 0 2px 6px rgb(15 17 21 / 6%);
  --radius-folha: 0;

  /* a voz: Spectral itálico, só para fala ditada */
  --font-fala: "Spectral", "Spectral Fallback", Georgia, "Times New Roman", serif;
  --text-fala: 1.25rem;        --leading-fala: 1.875rem;       /* 20/30 celular */
  --text-fala-grande: 1.75rem; --leading-fala-grande: 2.25rem; /* 28/36 */

  /* marketing */
  --text-display-landing: clamp(2.5rem, 1.6rem + 3.2vw, 5.25rem);
  --leading-display-landing: 1.04;
  --track-display-landing: -0.03em;
  --text-headline-landing: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --leading-headline-landing: 1.12;
  --track-headline-landing: -0.022em;
  --text-relogio: clamp(4.5rem, 1rem + 9vw, 9.5rem);   /* o "23:14" da passagem noturna */

  /* movimento */
  --ease-estado: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-chegada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-saida: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-feedback: 140ms;
  --dur-estado: 200ms;
  --dur-voo: 600ms;

  /* faixa noturna: os valores do tema escuro usados como região fixa */
  --noite-fundo: #0e1014;
  --noite-superficie: #171a20;
  --noite-texto: #eceef2;
  --noite-apoio: #a4aab5;
  --noite-borda: #2a2e36;
  --noite-azul: #7c9cff;
}

@media (min-width: 1024px) {
  :root {
    --text-fala: 1.5rem;        --leading-fala: 2.125rem;        /* 24/34 desktop */
  }
}

[data-theme="dark"] {
  --color-palco: #0a0b0e;
  --shadow-folha: 0 24px 60px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 16%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-palco: #0a0b0e;
    --shadow-folha: 0 24px 60px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 16%);
  }
}

/* ---------- regiões que redeclaram tokens ---------- */

/* Palco: o anel de foco usa a cor de baixo como respiro. */
.palco {
  --bg: var(--color-palco);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  background: var(--color-palco);
}

/* Folha: documento renderizado é sempre claro, nos dois temas (o PDF real é branco). */
.folha {
  color-scheme: light;
  --color-grafite: #111318;
  --color-azul: #2f5bea;
  --color-azul-texto: #2448c8;
  --color-azul-sutil: #eef2fe;
  --color-azul-selecao: #d9e2fd;
  --color-superficie: #ffffff;
  --color-texto: #0f1115;
  --color-apoio: #555b66;
  --color-borda: #e5e6ea;
  --focus: var(--color-azul);
  --bg: var(--color-superficie);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  background: var(--color-superficie);
  color: var(--color-texto);
}

/* Passagem noturna: escura nos dois temas. */
.noite {
  color-scheme: dark;
  --color-fundo: var(--noite-fundo);
  --color-superficie: var(--noite-superficie);
  --color-texto: var(--noite-texto);
  --color-apoio: var(--noite-apoio);
  --color-borda: var(--noite-borda);
  --color-azul: var(--noite-azul);
  --bg: var(--noite-fundo);
  --focus: var(--noite-azul);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
  background: var(--noite-fundo);
  color: var(--noite-texto);
}