/* ==========================================================================
   variables.css
   Design tokens. Paleta "âmbar queimado", laranja com base marrom.

   O site alterna seções escuras (--color-ink) e claras (--color-paper).
   Cada seção declara o tema com .section--ink ou .section--paper, que
   redefine --fg, --fg-soft, --fg-muted, --border e --surface localmente.
   Os componentes leem só essas variáveis, então funcionam nos dois fundos.
   ========================================================================== */

:root {
  /* Acento */
  --color-accent: #c2703d;
  --color-accent-dark: #a65c2e;
  --color-accent-light: #e0a46a;

  /* Fundos */
  --color-ink: #12100e;
  --color-ink-2: #1b1815;
  --color-ink-3: #262119;
  --color-paper: #f6f1e9;
  --color-paper-2: #ebe3d7;

  /* Texto sobre fundo escuro */
  --on-ink: #f6f1e9;
  --on-ink-soft: #bcb3a7;
  --on-ink-muted: #8c8378;
  --border-ink: rgba(246, 241, 233, 0.14);
  --border-ink-strong: rgba(246, 241, 233, 0.32);

  /* Texto sobre fundo claro */
  --on-paper: #17130f;
  --on-paper-soft: #4a423a;
  --on-paper-muted: #7c7266;
  --border-paper: rgba(23, 19, 15, 0.16);
  --border-paper-strong: rgba(23, 19, 15, 0.38);

  /* Tema padrão da página (escuro) */
  --fg: var(--on-ink);
  --fg-soft: var(--on-ink-soft);
  --fg-muted: var(--on-ink-muted);
  --border: var(--border-ink);
  --border-strong: var(--border-ink-strong);
  --surface: var(--color-ink-2);

  /* Tipografia */
  --font-heading: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --container: 1300px;
  --section-padding: 112px;
  --header-height: 96px;

  /* Efeitos */
  --shadow-header: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.45);
  --transition: 0.3s ease;
  --transition-slow: 0.7s ease;
}

/* --------------------------------------------------------------------------
   Temas de seção
   -------------------------------------------------------------------------- */
.section--ink {
  background: var(--color-ink);
  --fg: var(--on-ink);
  --fg-soft: var(--on-ink-soft);
  --fg-muted: var(--on-ink-muted);
  --border: var(--border-ink);
  --border-strong: var(--border-ink-strong);
  --surface: var(--color-ink-2);
  color: var(--fg);
}

.section--paper {
  background: var(--color-paper);
  --fg: var(--on-paper);
  --fg-soft: var(--on-paper-soft);
  --fg-muted: var(--on-paper-muted);
  --border: var(--border-paper);
  --border-strong: var(--border-paper-strong);
  --surface: var(--color-paper-2);
  color: var(--fg);
}