/* ============================================================
   STUDIO FAD — SISTEMA — tokens de design
   Fonte: Design-UX-Sistema-StudioFad.md (seção 0).
   Base = tokens reais do site institucional (studiofad.com.br/css/style.css).
   Extensão = estados de produto (sucesso/erro/alerta/overlay) que o
   site institucional não precisava.
   NÃO redefinir estes tokens localmente em outro arquivo — sempre
   importar este CSS antes de qualquer folha de estilo de tela.
   ============================================================ */

:root {
  /* ---- base (idêntica ao site institucional) ---- */
  --bg: #0c0b0a;
  --bg-elevado: #131211;
  --surface: #1a1917;
  --surface-borda: rgba(255, 255, 255, 0.14);
  --texto: #e8e6df;
  --texto-suave: #8d8d8a;
  --texto-faint: #666663;
  --dourado: #c89b3c;
  --dourado-forte: #d9ae54;
  --creme: #f4f3ef;
  --preto-cta: #111111;

  /* ---- extensão de produto (0.2) ---- */
  --sucesso: #5c8a63;
  --sucesso-bg: rgba(92, 138, 99, 0.14);
  --erro: #b5453d;
  --erro-bg: rgba(181, 69, 61, 0.14);
  --alerta: var(--dourado-forte);
  --alerta-bg: rgba(217, 174, 84, 0.14);
  --overlay: rgba(12, 11, 10, 0.72);

  /* ---- classificação de atendimento por tipo (item, backend-sistemas
     2026-09-17, lote de ajustes pedido pelo cliente) -- cor por tipo de
     serviço avulso + roxo pra pendência de pagamento. Plano usa --dourado
     (já existente, cor de marca) em vez de token novo. ---- */
  --laranja: #c9793c;
  --laranja-bg: rgba(201, 121, 60, 0.14);
  --azul: #4c7ea8;
  --azul-bg: rgba(76, 126, 168, 0.14);
  --verde-avulso: #6b9a5a;
  --verde-avulso-bg: rgba(107, 154, 90, 0.14);
  --roxo: #8c6bb0;
  --roxo-bg: rgba(140, 107, 176, 0.14);

  /* ---- tipografia (0.3) ---- */
  --fonte-display: "Anton", "Arial Narrow", sans-serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-credito: "Fraunces", "Georgia", serif;

  --display-lg: 2.5rem;
  --display-md: 1.75rem;
  --display-sm: 1.25rem;
  --corpo-lg: 1rem;
  --corpo-md: 0.9rem;
  --corpo-sm: 0.8rem;
  --label-size: 0.75rem;

  --radius: 14px;
  --radius-sm: 4px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font-family: inherit;
}