/* =================================================================
   KhatamQuran.ID — Design System Variables
   Brand: Refined Islamic Heritage × Modern Editorial
   ================================================================= */

:root {
  /* ── Islamic Green Palette ── */
  --kq-950: #041A0E;
  --kq-900: #0A2B18;
  --kq-800: #134A2A;
  --kq-700: #1C6B3A;
  --kq-600: #278C4C;
  --kq-500: #34A85E;
  --kq-400: #5AC47A;
  --kq-300: #85D49B;
  --kq-200: #B3E4BF;
  --kq-100: #D9F2E1;
  --kq-50:  #EFF9F3;

  /* ── Gold / Amber ── */
  --kq-gold-dk:   #6B4500;
  --kq-gold:      #B8860B;
  --kq-gold-mid:  #D4A017;
  --kq-gold-soft: #F0C040;
  --kq-gold-pale: #FDF7E3;
  --kq-gold-glow: rgba(212,160,23,.15);

  /* ── Warm Cream / Parchment ── */
  --kq-cream:    #FFFDF7;
  --kq-cream-dk: #F5EDD6;
  --kq-parchment:#EDE0C4;

  /* ── Teal Accent ── */
  --kq-teal:     #0D7377;
  --kq-teal-soft:#14A085;

  /* ── Text Colors ── */
  --kq-text:       #0F1F14;
  --kq-text-mid:   #2A4030;
  --kq-text-muted: #567060;
  --kq-text-light: #8DA898;

  /* ── Surfaces ── */
  --kq-surface:    #FFFFFF;
  --kq-surface-2:  #F5FAEF;
  --kq-surface-3:  #EFF9F3;
  --kq-border:     #D5E8DA;
  --kq-border-soft:#E8F3EB;

  /* ── Shadows ── */
  --kq-shadow-sm: 0 2px 8px rgba(12,40,20,.08);
  --kq-shadow:    0 4px 20px rgba(12,40,20,.12);
  --kq-shadow-lg: 0 12px 40px rgba(12,40,20,.18);
  --kq-shadow-xl: 0 24px 64px rgba(12,40,20,.22);

  /* ── Typography ── */
  --font-quran:   'Scheherazade New', serif;
  --font-head:    'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sub:     'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-arabic:  'Amiri', 'Scheherazade New', serif;

  /* ── Spacing Scale ── */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms cubic-bezier(.4,0,.2,1);
  --transition-spring: 350ms cubic-bezier(.34,1.56,.64,1);

  /* ── Z-Index ── */
  --z-dropdown:  40;
  --z-sticky:    50;
  --z-overlay:   60;
  --z-modal:     70;
  --z-toast:     80;
  --z-top:       90;
}

/* ── Dark Mode Override ── */
html.dark {
  --kq-cream:      #041A0E;
  --kq-surface:    #0A2B18;
  --kq-surface-2:  #0F3320;
  --kq-surface-3:  #134A2A;
  --kq-border:     #1C6B3A;
  --kq-border-soft:#134A2A;
  --kq-text:       #D9F2E1;
  --kq-text-mid:   #B3E4BF;
  --kq-text-muted: #85D49B;
  --kq-text-light: #5AC47A;
  --kq-shadow-sm:  0 2px 8px rgba(0,0,0,.4);
  --kq-shadow:     0 4px 20px rgba(0,0,0,.5);
  --kq-shadow-lg:  0 12px 40px rgba(0,0,0,.6);
  --kq-gold-pale:  #1A1200;
  --kq-cream-dk:   #0F1A08;
  --kq-parchment:  #1A1500;
}