/* ============================================================
   VARIABLES.CSS — Design Tokens
   Altere aqui para mudar cores, fontes e espaçamentos globais
   ============================================================ */

:root {

  /* ── Cores ─────────────────────────────────────────────── */
  --color-primary:       #b05d03;   /* âmbar principal         */
  --color-primary-light: #d97b20;   /* âmbar claro / hover     */
  --color-dark:          #1a1714;   /* fundo escuro / texto     */
  --color-mid:           #4a4540;   /* texto secundário         */
  --color-cream:         #f8f5f0;   /* fundo secções claras     */
  --color-light:         #e8e2d8;   /* bordas e separadores     */
  --color-white:         #ffffff;

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', sans-serif;

  --text-xs:   0.68rem;
  --text-sm:   0.82rem;
  --text-base: 0.90rem;
  --text-lg:   1.10rem;
  --text-xl:   1.40rem;
  --text-2xl:  1.80rem;
  --text-3xl:  2.40rem;

  /* ── Espaçamentos ───────────────────────────────────────── */
  --spacing-xs:  0.5rem;
  --spacing-sm:  1.0rem;
  --spacing-md:  2.0rem;
  --spacing-lg:  4.0rem;
  --spacing-xl:  6.0rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:    1300px;
  --max-width-md: 1100px;

  /* ── Bordas e Sombras ───────────────────────────────────── */
  --radius:      2px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:   0 8px 32px rgba(176,93,3,0.10);

  /* ── Transições ─────────────────────────────────────────── */
  --transition-fast:   0.25s ease;
  --transition-normal: 0.40s ease;
  --transition-slow:   0.80s ease;
}