/*
 * Design tokens — Instituto Comute
 * Fonte: DESIGN.md (_bmad-output/planning-artifacts/ux-designs/ux-instituto-comute-app-2026-07-20/DESIGN.md)
 * Não editar valores aqui sem atualizar o DESIGN.md correspondente.
 */

:root {
  /* Colors — light (default) */
  --cc-bg: #F5F1E8;
  --cc-surface: #FBF7EE;
  --cc-surface-alt: #F0E9D8;
  --cc-ink: #2B2B2B;
  --cc-ink-soft: #6B6252;
  --cc-ink-faint: #948A76;
  --cc-primary: #4A3826;
  --cc-accent: #C9973B;
  --cc-accent-strong: #8A5D1C;
  --cc-line: #E2D6B8;
  --cc-line-strong: #CBB98C;

  /* Typography */
  --cc-font-display: 'Fraunces Comute', Georgia, serif;
  --cc-font-body: 'Inter Comute', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rounded */
  --cc-rounded-sm: 4px;
  --cc-rounded-md: 6px;
  --cc-rounded-lg: 10px;
  --cc-rounded-full: 9999px;

  /* Spacing */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-6: 24px;
  --cc-space-8: 32px;
  --cc-space-12: 48px;
  --cc-space-16: 64px;
  --cc-gutter: 20px;
  --cc-section-y: 72px;
  --cc-hero-y: 112px;
}

/* Colors — dark, via preferência do sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --cc-bg: #1C1B19;
    --cc-surface: #262421;
    --cc-surface-alt: #2E2B26;
    --cc-ink: #EDE6D6;
    --cc-ink-soft: #A99F8B;
    --cc-ink-faint: #79705F;
    --cc-primary: #B89268;
    --cc-accent: #D9A94F;
    --cc-accent-strong: #E9C179;
    --cc-line: #37342E;
    --cc-line-strong: #4A453C;
  }
}

/* Overrides explícitos (ex: toggle de tema no site, se existir) */
:root[data-theme='dark'] {
  --cc-bg: #1C1B19;
  --cc-surface: #262421;
  --cc-surface-alt: #2E2B26;
  --cc-ink: #EDE6D6;
  --cc-ink-soft: #A99F8B;
  --cc-ink-faint: #79705F;
  --cc-primary: #B89268;
  --cc-accent: #D9A94F;
  --cc-accent-strong: #E9C179;
  --cc-line: #37342E;
  --cc-line-strong: #4A453C;
}

:root[data-theme='light'] {
  --cc-bg: #F5F1E8;
  --cc-surface: #FBF7EE;
  --cc-surface-alt: #F0E9D8;
  --cc-ink: #2B2B2B;
  --cc-ink-soft: #6B6252;
  --cc-ink-faint: #948A76;
  --cc-primary: #4A3826;
  --cc-accent: #C9973B;
  --cc-accent-strong: #8A5D1C;
  --cc-line: #E2D6B8;
  --cc-line-strong: #CBB98C;
}

/*
 * --cc-panel-strong: fundo de painel "cheio" (ex: seção de destaque em bloco).
 * Fixo de propósito — NUNCA redeclarar dentro dos blocos de dark mode acima.
 * Ver ARCHITECTURE-SPINE.md/memlog da sessão de UX: reusar --cc-primary como
 * background de um bloco cheio quebra no dark mode, porque --cc-primary vira
 * uma cor clara (pensada pra texto sobre fundo escuro), não um fundo.
 */
:root {
  --cc-panel-strong: #4A3826;
}

/*
 * --cc-on-accent: texto sobre preenchimento --cc-accent (dourado). Fixo de
 * propósito — NUNCA redeclarar nos blocos de dark mode. Contraste calculado:
 * grafite #2B2B2B sobre accent claro (#C9973B) = 5.38:1; sobre accent-dark
 * (#D9A94F) = 6.57:1 — ambos passam AA (4.5:1). O DESIGN.md original
 * especificava `color: {colors.bg}` pro botão primário, o que dá só 2.34:1
 * (falha AA) — corrigido aqui e reportado de volta pro DESIGN.md.
 */
:root {
  --cc-on-accent: #2B2B2B;
}