/* ============================================================
   Design System "Convite" · FabLabTech
   Tokens extraídos do convite da oficina "Engajar para quê?"
   Fonte única da verdade para web. Não crie cores fora daqui.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700;800&display=swap");

:root {
  /* ---------- Cores de marca (valores do impresso) ---------- */
  --cor-papel: #f7efe4;          /* fundo de tudo */
  --cor-papel-claro: #fffaf3;    /* superfícies elevadas: cartões, campos */
  --cor-tinta: #111111;          /* texto principal e títulos */
  --cor-laranja: #e55d39;        /* marca, ação, segunda linha do título */
  --cor-azul: #01288d;           /* rótulo de resultado ("Você sai com") */
  --cor-oliva: #b7be5f;          /* traço sob o título, ornamentos */
  --cor-pedra: #8c8478;          /* linhas, bordas tracejadas, ornamentos */
  --cor-vermelho-logo: #f21c1d;  /* SOMENTE no bloco do logo */

  /* ---------- Variantes para texto pequeno (WCAG AA 4.5:1) ---------- */
  --cor-laranja-texto: #b84a26;  /* laranja em texto < 24px */
  --cor-oliva-texto: #5f6420;    /* rótulo "Como funciona" em tela */
  --cor-pedra-texto: #6b645a;    /* metadados, rodapés, legendas */

  /* ---------- Papéis semânticos (use estes no código) ---------- */
  --fundo: var(--cor-papel);
  --superficie: var(--cor-papel-claro);
  --texto: var(--cor-tinta);
  --texto-suave: var(--cor-pedra-texto);
  --marca: var(--cor-laranja);
  --marca-texto: var(--cor-laranja-texto);
  --acao-fundo: var(--cor-laranja);
  --acao-texto: var(--cor-tinta);
  --rotulo-resultado: var(--cor-azul);
  --rotulo-processo: var(--cor-oliva-texto);
  --traco: var(--cor-oliva);
  --linha: var(--cor-pedra);
  --foco: var(--cor-azul);
  --erro: #b3261e;
  --sucesso: #4d5a12;

  /* ---------- Tipografia ---------- */
  --fonte: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-regular: 400;
  --peso-negrito: 700;
  --peso-titulo: 800;

  --tam-titulo: clamp(2.25rem, 1.6rem + 3vw, 3.25rem); /* 36 → 52px */
  --tam-subtitulo: 1.125rem;  /* 18px */
  --tam-corpo: 1rem;          /* 16px */
  --tam-rotulo: 0.9375rem;    /* 15px, negrito */
  --tam-meta: 0.875rem;       /* 14px */
  --tam-nota: 0.75rem;        /* 12px, mínimo absoluto */

  --altura-titulo: 1.1;
  --altura-subtitulo: 1.35;
  --altura-corpo: 1.5;
  --espaco-letra-titulo: -0.01em;
  --espaco-letra-caixa-alta: 0.04em;

  --medida-texto: 60ch;       /* largura máxima de parágrafo */

  /* ---------- Espaçamento (base 4px) ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --margem-tela: clamp(20px, 6vw, 48px);

  /* ---------- Formas ---------- */
  --raio-nenhum: 0;
  --raio-moldura: 12px;       /* moldura laranja (cartão de destaque, QR) */
  --raio-botao: 10px;
  --raio-total: 999px;        /* marcadores e pontos */
  --borda-moldura: 3px;
  --borda-fina: 1px;
  --altura-traco: 0.27em;     /* traço oliva sob o título */

  /* ---------- Sombra: o sistema não usa sombra ---------- */
  --sombra: none;

  /* ---------- Movimento ---------- */
  --duracao: 160ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Toque (mobile) ---------- */
  --alvo-toque: 44px;
}

/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #1c1915;
    --superficie: #26221d;
    --texto: #f7efe4;
    --texto-suave: #a69d90;
    --marca: #e55d39;
    --marca-texto: #ef7b58;
    --acao-fundo: #e55d39;
    --acao-texto: #111111;
    --rotulo-resultado: #9fb3f5;
    --rotulo-processo: #b7be5f;
    --traco: #b7be5f;
    --linha: #8c8478;
    --foco: #9fb3f5;
    --erro: #f2b8b5;
    --sucesso: #c5cc7a;
  }
}
:root[data-theme="dark"] {
  --fundo: #1c1915;
  --superficie: #26221d;
  --texto: #f7efe4;
  --texto-suave: #a69d90;
  --marca: #e55d39;
  --marca-texto: #ef7b58;
  --acao-fundo: #e55d39;
  --acao-texto: #111111;
  --rotulo-resultado: #9fb3f5;
  --rotulo-processo: #b7be5f;
  --traco: #b7be5f;
  --linha: #8c8478;
  --foco: #9fb3f5;
  --erro: #f2b8b5;
  --sucesso: #c5cc7a;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duracao: 0ms; }
}