/* Identidade editorial na landing (2026-10-10): Fraunces/DM Sans e botões do
   app. Desde 2026-10-13 o fundo é o grafite fundo do app (escolha do founder,
   "Grafite fundo": o mesmo #1B211D do convite e das ilustrações do passo a
   passo), com os cartões no grafite. Fontes self-hosted em /assets/fonts (sem
   build step). */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-400-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-400-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-500-latin.woff2) format('woff2');
}

:root,
:root[data-brand-mode] {
  --font-display: var(--font-editorial-title);
  --font-heading: var(--font-editorial-body);
  --font-body: var(--font-editorial-body);
  --font-title: var(--font-editorial-title);

  --accent: var(--playlist-primary);
  --accent-h: var(--playlist-active-icon);
  --text-on-accent: var(--playlist-on-primary);
  --accent-bg: var(--playlist-selected);
  --accent-border: var(--playlist-chip-border);
  --accent-soft: var(--playlist-chip);
}

/* Grafite fundo em todas as páginas. `html:root` vence o :root do brand.css,
   que nas páginas SEO e legais carrega depois deste arquivo, e as paletas
   próprias que algumas páginas declaram no :root. */
html:root,
html:root[data-brand-mode] {
  --bg: var(--playlist-background-deep);
  --surface: var(--playlist-background);
  --surface2: var(--playlist-selected);
  --surface3: var(--playlist-control);
  --card: var(--playlist-selected);
  --text: var(--playlist-title);
  --muted: var(--playlist-origin);
  --faint: var(--playlist-placeholder);
  --border: var(--playlist-divider);
  --border-hover: var(--playlist-input-border);
}

/* DM Sans e Fraunces só existem em 400/500: sem negrito sintético. */
html {
  font-synthesis: none;
}

/* Títulos em Fraunces. Os h1/h2 da landing trazem peso e tamanho inline,
   por isso o !important (só aqui, nesta camada da landing). */
h1,
h2 {
  font-family: var(--font-title) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

h1.display {
  font-size: clamp(46px, 9vw, 92px) !important;
  line-height: 1.02 !important;
}

:root .eyebrow {
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* Logo limpo, sem halo (como na web). */
.logo-wrap::before {
  display: none !important;
}

:root .btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 500;
  border-radius: 999px;
}

:root .btn-primary:hover {
  background: var(--accent-h);
  color: var(--text-on-accent);
  box-shadow: none;
}

:root .btn-ghost,
:root .btn-outline {
  border-radius: 999px;
}