/* Tokens de design — Fase 028 (Atelier Nuptial). Única camada com valor literal;
   base.css/componentes.css/layout.css consomem só var(--...) daqui.

   Valores de `specs/028-redesign-atelier-nuptial/contracts/design-tokens.md`, tirados do
   layout do usuário (`referencia/DESIGN-atelier-nuptial.md` + o `tailwind.config` embutido nas
   8 telas). Os NOMES são os mesmos da Fase 14 (Auralis) — as telas e `gerarTema()` dependem
   deles; só o VALOR mudou (research.md da Fase 028, Decisão 1).

   Desde 2026-10-03 a fonte de verdade é o design system do usuário (artifact "Atelier
   Nuptial", ver `.claude/rules/design-system.md`); os nomes do artifact aparecem entre
   parênteses quando diferem dos daqui. */
:root {
  /* Superfície e tinta — marfim quente, texto espresso */
  --surface: #fff8f5; /* fundo da página */
  --surface-container-lowest: #ffffff; /* cartão */
  --surface-container-low: #faf2ef; /* barra lateral, campo */
  --surface-container: #f4ece9; /* trilha, chip neutro, bloco interno */
  --surface-container-high: #eee7e3; /* botão neutro, hover */
  --surface-container-highest: #e8e1de; /* trilha de barra */
  --on-surface: #1e1b19; /* texto primário */
  --on-surface-variant: #424844; /* texto secundário */
  --outline: #737873; /* só ícone/borda — nunca texto */
  /* Borda-fantasma: o layout separa por sombra quente e mudança de superfície, não por linha
     escura ("Bordas fantasma", DESIGN.md). */
  --outline-variant: rgba(62, 83, 70, 0.08); /* (ghost-outline) */
  --divisor: rgba(62, 83, 70, 0.06); /* separador dentro de cartão */
  --inverse-surface: #33302e;
  --inverse-on-surface: #f7efec;

  /* Primário — verde-bosque */
  --primary: #283c30;
  --on-primary: #ffffff;
  --primary-container: #3e5346;
  --on-primary-container: #aec6b5;

  /* Paleta de marca (issue #151) — a cor PRINCIPAL, quando customizada, sobrescreve TODO o
     tema em runtime (`gerarTema()`, `src/lib/temaCores.ts`, aplicado por `BudgetProvider.tsx`):
     fundo, texto, bordas e botões (`--surface*`/`--on-surface*`/`--outline*`/`--primary*`
     acima), não só estes dois tokens. `--marca-secundaria`/`--marca-detalhe` vêm das cores
     secundária e de detalhe do casal. Sem customização, valem os padrões do Atelier abaixo:
     terracota para acento, dourado para aro decorativo (Fase 028, FR-039). */
  --marca-secundaria: #894f3d;
  --marca-detalhe: #735c00;
  /* Pêssego suave — pílula "Faltam N dias", destaque emotivo de baixo volume. */
  --secundaria-container: #ffdbd0; /* (secondary-fixed) */
  --on-secundaria-container: #6c3827; /* (on-secondary-fixed-variant) */
  /* Verde-sálvia de sucesso para o retorno das ações (F1/F1b/F4) e o lampejo de total. */
  --primary-fixed: #d0e8d7;
  --primary-fixed-dim: #b5ccbc; /* anel do item recém-criado */
  --on-primary-fixed: #0b1f15;
  --on-primary-fixed-variant: #374b3f;
  --inverse-primary: #b5ccbc; /* ação ("Desfazer") sobre o aviso escuro */
  /* Dourado escovado — só decorativo (2,3:1 no branco): aro do selo de conquista (F4). */
  --dourado-decorativo: #cca730; /* (tertiary-container) */

  /* Severidade — Princípio IV (NON-NEGOTIABLE): cotação real vs. estimativa precisam ser
     sempre distinguíveis. Nunca recoloridas pela paleta do casal. Contraste calculado em
     contracts/design-tokens.md (todos ≥ 7:1 no par texto/fundo). */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --atencao: #6c3827;
  --atencao-container: #ffdbd0;
  --ok: #374b3f;
  --ok-container: #d0e8d7;

  /* Tipografia — serifa editorial nos títulos, sans humanista na interface */
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --tipo-display-tam: 36px;
  --tipo-headline-tam: 28px;
  --tipo-secao-tam: 22px;
  --tipo-title-tam: 18px;
  --tipo-body-tam: 14px;
  --tipo-label-tam: 11px;
  --tipo-dado-tam: 14px;

  /* Espaçamento */
  --esp-xs: 4px;
  --esp-sm: 8px;
  --esp-md: 16px;
  --esp-lg: 24px;
  --esp-xl: 40px;
  --esp-2xl: 64px;
  --gutter: 24px;
  --margem-mobile: 20px;
  --margem-desktop: 48px; /* (margin-desktop) */
  --container-max: 1200px; /* (container-max) área útil do conteúdo no desktop */
  --trilho: calc(var(--container-max) + 2 * var(--margem-desktop));
  --coluna-mobile: 600px;
  --sidebar: 288px;
  --altura-toque: 48px;

  /* Raio — controles 8, blocos internos 12, cartões 16, estado em pílula */
  --raio-sm: 4px;
  --raio-check: 6px; /* (rounded-check) caixa de seleção */
  --raio: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px; /* (rounded-xl) gaveta inferior, cartão de foto */
  --raio-full: 9999px;

  /* Elevação — sombras quentes, difusas, sem preto puro */
  --sombra-ambiente: 0 4px 16px rgba(43, 40, 38, 0.04); /* (shadow-ambient) */
  --sombra-elevada: 0 8px 32px rgba(43, 40, 38, 0.04); /* (shadow-raised) */
  --vidro-blur: blur(12px);
  --vidro-fundo: rgba(255, 248, 245, 0.85);
  --veu: rgba(51, 48, 46, 0.32); /* (scrim) atrás de gaveta e diálogo, com --vidro-blur */
  --sombra-aviso: 0 12px 32px rgba(30, 27, 25, 0.24);
  --sombra-dialogo: 0 24px 64px rgba(30, 27, 25, 0.22);
  --sombra-gaveta: -12px 0 40px rgba(43, 40, 38, 0.12);

  /* Retorno das ações (F1–F5) — tamanhos e empilhamento do design system. */
  --largura-gaveta: 440px; /* (drawer-width) */
  --largura-aviso: 420px; /* (toast-width) */
  --largura-momento: 480px; /* (moment-width) */
  --z-sticky: 20;
  --z-tabbar: 30;
  --z-veu: 40; /* (z-scrim) */
  --z-gaveta: 50; /* (z-drawer) */
  --z-aviso: 60; /* (z-toast) */
  --z-modal: 70;

  /* Breakpoint estrutural (barra lateral). A tipografia já cresce a partir de 768px
     (tablet), como o design system pede — variáveis CSS não entram em @media, por isso o
     número está repetido abaixo. */
  --bp-larga: 1024px;

  /* Aliases de compatibilidade — nomes usados em estilo inline pelas telas
     (var(--ink), var(--muted), var(--line), ...). Mapear evita reescrever cada uso
     (Fase 14, research.md, Decisão 4). */
  --ink: var(--on-surface);
  --muted: var(--on-surface-variant);
  --line: var(--outline-variant);
  --accent: var(--on-surface);
  --accent-soft: var(--surface-container);
  --ok-soft: var(--ok-container);
  --bad: var(--error);
  --bad-soft: var(--error-container);
  --warn: var(--atencao);
  --warn-soft: var(--atencao-container);
}

@media (min-width: 768px) {
  :root {
    --tipo-display-tam: 48px;
    --tipo-headline-tam: 36px;
    --tipo-secao-tam: 26px;
  }
}