/* ====================================================================
   DESIGN SYSTEM TOKENS - Markaz Darul Quran Ash Shofwah
   Aesthetic: Deep Islamic Emerald Green + Warm Honey Gold Accent
   Compliant with PRD Bab 16 & UI/UX Pro Max Principles
   ==================================================================== */

:root {
  /* Color Palette - Emerald Green Primary */
  --color-primary-950: #022c22;
  --color-primary-900: #064e3b;
  --color-primary-800: #065f46;
  --color-primary-700: #047857;
  --color-primary-600: #059669;
  --color-primary-500: #10b981;
  --color-primary-100: #d1fae5;
  --color-primary-50:  #ecfdf5;

  /* Color Palette - Honey Amber Gold Accent (For Taawun & CTAs) */
  --color-gold-900: #78350f;
  --color-gold-800: #92400e;
  --color-gold-700: #b45309;
  --color-gold-600: #d97706;
  --color-gold-500: #f59e0b;
  --color-gold-400: #fbbf24;
  --color-gold-100: #fef3c7;
  --color-gold-50:  #fffbeb;

  /* Neutrals & Warm Backgrounds */
  --color-bg-base: #fcfbf7;      /* Warm Islamic off-white */
  --color-bg-surface: #ffffff;
  --color-bg-muted: #f4f4f0;
  --color-border: #e6e5dd;
  --color-border-focus: #047857;

  /* Text & Content */
  --color-text-main: #1c1917;
  --color-text-muted: #57534e;
  --color-text-subtle: #78716c;
  --color-text-inverse: #ffffff;

  /* Status Colors */
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-error: #b91c1c;
  --color-info: #0369a1;

  /* Typography */
  --font-heading: 'Amiri', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', serif;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(6, 78, 59, 0.07), 0 2px 4px -2px rgba(6, 78, 59, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(6, 78, 59, 0.09), 0 4px 6px -4px rgba(6, 78, 59, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(6, 78, 59, 0.12), 0 8px 10px -6px rgba(6, 78, 59, 0.07);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing Rhythm */
  --container-max: 1240px;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}