:root {
  /* Official SmartPray AR Color Palette */
  --color-emerald: #008F68;
  --color-emerald-dark: #007353;
  --color-emerald-light: #00A87A;
  --color-emerald-soft: #EAF7F2;
  --color-emerald-glow: rgba(0, 143, 104, 0.2);

  --color-navy: #062A46;
  --color-navy-dark: #031726;
  --color-navy-surface: #0a3556;
  --color-navy-light: #104C7A;
  --color-navy-soft: rgba(6, 42, 70, 0.05);

  --color-gold: #F2C14E;
  --color-gold-hover: #E3B03B;
  --color-gold-soft: #FFF9EA;
  --color-gold-glow: rgba(242, 193, 78, 0.25);

  --color-cream: #FFF9EE;
  --color-cream-surface: #FDF7EA;
  --color-cream-light: #FCFBF8;
  --color-white: #FFFFFF;

  /* Typography Colors */
  --text-main: #062A46;
  --text-heading: #062A46;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --text-white: #FFFFFF;
  --text-white-muted: rgba(255, 255, 255, 0.75);

  /* Borders & Dividers */
  --border-subtle: rgba(6, 42, 70, 0.08);
  --border-medium: rgba(6, 42, 70, 0.14);
  --border-emerald: rgba(0, 143, 104, 0.3);
  --border-gold: rgba(242, 193, 78, 0.35);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(6, 42, 70, 0.05);
  --shadow-sm: 0 4px 12px rgba(6, 42, 70, 0.06);
  --shadow-md: 0 10px 30px rgba(6, 42, 70, 0.08);
  --shadow-lg: 0 20px 48px rgba(6, 42, 70, 0.12);
  --shadow-emerald: 0 8px 25px rgba(0, 143, 104, 0.28);
  --shadow-gold: 0 8px 25px rgba(242, 193, 78, 0.3);
  --shadow-phone: 0 25px 50px -12px rgba(6, 42, 70, 0.28), 0 0 0 1px rgba(6, 42, 70, 0.08);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --container-max: 1200px;
}