/* ==========================================================================
   Tokens de design
   As 7 cores base são configuráveis pelo painel (Aparência) e injetadas pelo
   servidor em :root. Todas as demais cores derivam delas com color-mix().
   ========================================================================== */
:root {
  /* Cores configuráveis (valores padrão) */
  --primary-color: #6B503B;
  --secondary-color: #B08A4A;
  --background-color: #F4EDE3;
  --surface-color: #FAF7F2;
  --text-color: #3E2F24;
  --button-color: #6B503B;
  --button-text-color: #FFFFFF;

  /* Derivadas */
  --text-muted: color-mix(in srgb, var(--text-color) 68%, var(--background-color));
  --text-soft: color-mix(in srgb, var(--text-color) 52%, var(--background-color));
  --line: color-mix(in srgb, var(--secondary-color) 38%, transparent);
  --line-soft: color-mix(in srgb, var(--primary-color) 12%, transparent);
  --surface-raised: color-mix(in srgb, var(--surface-color) 70%, #fff);
  --surface-sunken: color-mix(in srgb, var(--background-color) 82%, var(--primary-color));
  --accent-soft: color-mix(in srgb, var(--secondary-color) 14%, var(--surface-color));
  --focus-ring: color-mix(in srgb, var(--secondary-color) 70%, transparent);

  --success: #4F7A55;
  --success-soft: #E6EFE3;
  --danger: #A2463B;
  --danger-soft: #F6E3DF;
  --warning: #A77B2B;
  --warning-soft: #F5EAD3;
  --info: #5A6B86;
  --info-soft: #E5E9F0;

  /* Tipografia */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-base: 0.95rem;
  --fs-md: 1.08rem;
  --fs-lg: 1.3rem;
  --fs-xl: 1.7rem;
  --fs-2xl: clamp(1.75rem, 6.4vw, 2.6rem);

  /* Espaçamento */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Formas */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Sombras muito suaves, com tom quente */
  --shadow-xs: 0 1px 2px rgb(74 52 32 / 0.05);
  --shadow-sm: 0 1px 2px rgb(74 52 32 / 0.04), 0 6px 18px -6px rgb(74 52 32 / 0.10);
  --shadow-md: 0 2px 6px rgb(74 52 32 / 0.05), 0 16px 36px -12px rgb(74 52 32 / 0.18);
  --shadow-lg: 0 24px 60px -18px rgb(50 34 20 / 0.35);

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  --container: 1120px;
  --container-narrow: 720px;
  --tap: 48px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}