:root {
  /* Brand colours */
  --cream:        #F7F3EC;
  --cream-dark:   #EDE7DB;
  --green:        #1B5C42;
  --green-mid:    #2A7A58;
  --green-light:  #E4F0EA;
  --gold:         #C4932A;
  --gold-light:   #F5E9CC;
  --ink:          #1A1A18;
  --muted:        #6B6860;
  --border:       #D8D0C4;
  --red:          #B03030;

  /* Pillar accent colours */
  --faith-color:    #6B4F9E;
  --faith-light:    #EDE9FA;
  --prayer-color:   #1B5C42;
  --prayer-light:   #E4F0EA;
  --zakat-color:    #C4932A;
  --zakat-light:    #F5E9CC;
  --fasting-color:  #1A6B8A;
  --fasting-light:  #DFF0F7;
  --hajj-color:     #7A3B1E;
  --hajj-light:     #F5E8DF;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);

  /* Nav */
  --nav-height: 64px;
}