/* =============================================
   ROYAL ROOTS — DESIGN SYSTEM TOKENS
   ============================================= */

:root {
  /* === BRAND COLORS === */
  --gold: #D4AF37;
  --gold-dark: #C19A2E;
  --gold-light: #F4E4C1;
  --gold-faint: rgba(212, 175, 55, 0.08);
  --cream: #FAF7F2;
  --charcoal: #2C2C2C;
  --charcoal-dark: #1A1A1A;
  --brown-rich: #5C4033;
  --white: #FFFFFF;
  --gray-light: #E5E5E5;
  --gray-mid: #999999;
  --text-dark: #1E1E1E;
  --text-body: #4A4A4A;
  --text-muted: #777777;
  --success: #4CAF50;
  --whatsapp: #25D366;

  /* === TYPOGRAPHY === */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === TYPE SCALE === */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;
  --text-6xl: 4rem;
  --text-hero: 4.75rem;

  /* === SPACING (8px grid) === */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5rem;
  --sp-8: 7.5rem;

  /* === SHADOWS === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.14);
  --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.25);
  --shadow-gold-lg: 0 16px 48px rgba(212, 175, 55, 0.35);

  /* === BORDERS === */
  --border-gold: 1px solid rgba(212, 175, 55, 0.4);
  --border-gold-solid: 2px solid #D4AF37;
  --border-light: 1px solid #E5E5E5;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.35s ease;
  --transition-slow: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* === Z-INDEX === */
  --z-navbar: 1000;
  --z-modal: 2000;
  --z-floating: 900;

  /* === CONTAINER === */
  --container-max: 1200px;
  --container-padding: 0 24px;
}