/* O design do MarkFlow para as páginas de campanha.
 *
 * Cópia dos tokens do tema do sistema (MarkFlowApp/markflow, apps/web/src/styles.css). Quando o
 * tema do sistema mudar, o desenvolvedor atualiza este arquivo; as páginas não definem cores,
 * fontes, tamanhos ou cantos próprios, só usam estas variáveis e as classes `mf-` abaixo.
 *
 * Regras do tema:
 * - Fundo, cartões, linhas e destaques em cinzas neutros, sem matiz.
 * - O lilás (`--mf-accent`) só no botão principal e no logo.
 * - Bricolage Grotesque nos títulos, Instrument Sans no texto, só nos pesos 400 e 700.
 * - Seis tamanhos de texto: 12, 14, 16, 20, 28 e 40 px.
 * - Cantos de 8 px num controle e de 12 px num cartão; nada de sombra, só linhas finas.
 * - Tema claro e escuro, conforme o navegador do visitante.
 * - Funciona a partir de um celular de 360 px, sem rolagem para os lados. */

:root {
  color-scheme: light dark;

  --mf-bg: #fafafa;
  --mf-surface: #ffffff;
  --mf-text: #1f1f1f;
  --mf-muted: #666666;
  --mf-line: #e0e0e0;
  --mf-accent: #c8aefa;
  --mf-accent-hover: #b99bf5;
  --mf-accent-soft: #f3ebff;
  --mf-on-accent: #1f1f1f;
  --mf-focus: #1f1f1f;
  --mf-neutral-soft: #efefef;
  --mf-highlight: #f2f2f2;
  --mf-surface-hover: #f5f5f5;
  --mf-ok: #2e7048;
  --mf-danger: #b02a37;

  --mf-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mf-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;

  --mf-text-xs: 0.75rem;
  --mf-text-sm: 0.875rem;
  --mf-text-base: 1rem;
  --mf-text-lg: 1.25rem;
  --mf-text-xl: 1.75rem;
  --mf-text-2xl: 2.5rem;

  --mf-radius-sm: 8px;
  --mf-radius-md: 12px;
  --mf-page: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mf-bg: #141414;
    --mf-surface: #1e1e1e;
    --mf-text: #ededed;
    --mf-muted: #a6a6a6;
    --mf-line: #333333;
    --mf-accent: #c8aefa;
    --mf-accent-hover: #d5c2fb;
    --mf-accent-soft: #322843;
    --mf-on-accent: #141414;
    --mf-focus: #ededed;
    --mf-neutral-soft: #2a2a2a;
    --mf-highlight: #262626;
    --mf-surface-hover: #262626;
    --mf-ok: #86d3a2;
    --mf-danger: #ff9097;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--mf-bg);
  color: var(--mf-text);
  font-family: var(--mf-font-sans);
  font-size: var(--mf-text-base);
  font-weight: 400;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--mf-font-display);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: var(--mf-text-xl);
}

h2 {
  font-size: var(--mf-text-xl);
}

h3 {
  font-size: var(--mf-text-lg);
}

@media (width >= 48rem) {
  h1,
  h2 {
    font-size: var(--mf-text-2xl);
  }
}

p {
  margin: 0;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--mf-focus);
  outline-offset: 2px;
}

/* A faixa da página, com a margem lateral de 16 px e a largura máxima do conteúdo. */
.mf-band {
  padding-inline: 16px;
}

.mf-container {
  max-width: var(--mf-page);
  margin-inline: auto;
}

.mf-muted {
  color: var(--mf-muted);
}

/* Botões e links com cara de botão. `mf-btn-primary` é o único lilás da página. */
.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-sm);
  background: var(--mf-surface);
  color: var(--mf-text);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mf-btn:hover {
  background: var(--mf-surface-hover);
}

.mf-btn-primary {
  border-color: var(--mf-accent);
  background: var(--mf-accent);
  color: var(--mf-on-accent);
}

.mf-btn-primary:hover {
  border-color: var(--mf-accent-hover);
  background: var(--mf-accent-hover);
}

.mf-btn-quiet {
  border-color: transparent;
  background: transparent;
}

/* O cartão: superfície com linha fina, sem sombra. */
.mf-card {
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-md);
  background: var(--mf-surface);
  padding: 20px;
}

/* O logo: o símbolo e o nome em Bricolage Grotesque. */
.mf-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mf-text);
  font-family: var(--mf-font-display);
  font-size: var(--mf-text-lg);
  font-weight: 700;
  text-decoration: none;
}

.mf-logo img {
  width: 1.15em;
  height: 1.15em;
}