/* ========================================
   DESIGN TOKENS — Primitive Layer
   ======================================== */
:root {
  /* ── Cores Primitivas ── */
  --black: #0B0B0B;
  --black-2: #141414;
  --black-3: #1C1C1E;
  --white: #F5F2EC;
  --white-pure: #FFFFFF;
  --cream: #F8F5F2;

  --gold: #C9A84C;
  --gold-light: #E2C87A;
  --gold-dark: #B8955A;
  --gold-muted: rgba(201, 168, 76, 0.15);

  --teal: #2A9D8F;
  --teal-light: #40B8A8;
  --teal-muted: rgba(42, 157, 143, 0.12);

  --green: #25D366;
  --red: #E74C3C;

  --gray-100: #F5F2EC;
  --gray-200: #E5E5E5;
  --gray-300: #CCCCCC;
  --gray-400: #999999;
  --gray-500: #8E8E93;
  --gray-600: #666666;
  --gray-700: #444444;
  --gray-800: #333333;
  --gray-900: #1A1A1A;

  /* ── Tipografia ── */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* ── Espaçamento (4px base) ── */
  --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;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Bordas ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 40px rgba(0, 0, 0, 0.4);
  --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.3);
  --shadow-wa: 0 4px 20px rgba(37, 211, 102, 0.3);

  /* ── Transições ── */
  --ease-out: 0.3s ease;
  --ease-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}