:root {
  /* Primary */
  --color-black: #000000;
  --color-espresso: #210d0a;
  --color-terracotta: #8a3b17;
  --color-orange: #ef7b40;
  --color-taupe: #b2a897;
  --color-cream: #ece5db;

  /* Logo fills — NÃO substituir por espresso / terracotta / cream */
  --color-logo: #573000;         /* fill em fundos claros + favicon */
  --color-logo-on-dark: #eae6dc; /* fill em fundos escuros (*-light.svg) */

  /* Neutrals */
  --color-ink: #210d0a;
  --color-muted: #6b635a;
  --color-border: #d4cbc0;
  --color-white: #fffcf8;
  --color-on-dark: #ece5db;

  /*
   * Semantic UI (shadcn-style roles mapped to brand palette)
   * primary  → terracotta — botões primários / CTAs
   * accent   → orange — detalhes gráficos, regras, hover de outline
   */
  --background: var(--color-cream);
  --foreground: var(--color-ink);
  --card: var(--color-white);
  --card-foreground: var(--color-ink);
  --primary: var(--color-terracotta);
  --primary-foreground: var(--color-white);
  --secondary: var(--color-espresso);
  --secondary-foreground: var(--color-on-dark);
  --muted: color-mix(in srgb, var(--color-cream) 70%, var(--color-taupe));
  --muted-foreground: var(--color-muted);
  --accent: var(--color-orange);
  --accent-foreground: var(--color-espresso);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-terracotta);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  /* Spacing & layout */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;
  --page-gutter: clamp(1.75rem, 6.5vw, 4.5rem);
  --max-width: 72rem;
  --nav-height: 5.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
}