/* ==========================================================================
   SUFIHEALINGS — DIVINE PALETTE DESIGN SYSTEM
   Qadri Emerald · Chishti Green & Gold · Divine Light (Nur)
   ========================================================================== */

/* ==========================================================================
   COLOR TOKENS — Root Variables
   ========================================================================== */
:root {
  /* ── QADRI ORDER (Abdul Qadir Gilani) ──────────────────────────────────
     Deep Emerald Green — Lineage, Spiritual Authority, Prophetic Knowledge,
     The Green Mantle (Khirqa), The Seal of Sainthood  */
  --qadri-emerald:       #006B3F;   /* Primary Qadri - deep emerald */
  --qadri-emerald-dark:  #003D24;   /* Deep Qadri hover/active states */
  --qadri-deep:          #022315;   /* Night canvas and deep framing */
  --qadri-emerald-light: #1AA35E;   /* Lighter accent */
  --qadri-emerald-pale:  #E8F5ED;   /* Background tint (10%) */

  /* ── CHISHTI ORDER (Khwaja Moinuddin Chishti) ───────────────────────────
     Warm Green + Solar Gold — Divine Love (Ishq), Service (Khidmat),
     The Sun of Ajmer, Sama & Qawwali, Open Heart  */
  --chishti-green:       #1B7A3D;   /* Primary Chishti - warm living green */
  --chishti-green-dark:  #145A2C;   /* Hover/active */
  --chishti-green-light: #2EB84E;   /* Accent */
  --chishti-green-pale:  #EBF5ED;   /* Background tint (10%) */

  --chishti-gold:        #D4A843;   /* Solar gold - primary accent */
  --chishti-gold-dark:   #B89036;   /* Hover */
  --chishti-gold-light:  #E8C87A;   /* Light accent */
  --chishti-gold-pale:   #FDF3E0;   /* Background tint (10%) */

  /* ── DIVINE LIGHT (Nur) ────────────────────────────────────────────────
     Radiant Illumination — The Light of Heavens and Earth,
     Nur Muhammad, The Lantern (Mishkat), Illuminated Heart  */
  --nur-radiant:         #F5E09A;   /* Radiant gold - primary light */
  --nur-radiant-dark:    #E8D07A;   /* Deeper gold */
  --nur-radiant-light:   #FAF0C8;   /* Pale glow */
  --nur-white:           #FDF6E3;   /* Warm parchment/cream - base background */
  --nur-white-pure:      #FFFDF7;   /* Elevated parchment surface */
  --nur-blush:           #FFF8E7;   /* Blush tint */

  /* ── SEMANTIC MAPPINGS (Use these in components) ─────────────────────── */
  /* Primary brand - Qadri authority */
  --color-primary:       var(--qadri-emerald);
  --color-primary-dark:  var(--qadri-emerald-dark);
  --color-primary-light: var(--qadri-emerald-light);
  --color-primary-pale:  var(--qadri-emerald-pale);

  /* Secondary/accent - Chishti love & service */
  --color-secondary:     var(--chishti-gold);
  --color-secondary-dark: var(--chishti-gold-dark);
  --color-secondary-light: var(--chishti-gold-light);
  --color-secondary-pale: var(--chishti-gold-pale);

  /* Tertiary - Chishti green for growth/healing */
  --color-healing:       var(--chishti-green);
  --color-healing-dark:  var(--chishti-green-dark);
  --color-healing-light: var(--chishti-green-light);
  --color-healing-pale:  var(--chishti-green-pale);

  /* Divine light - radiance, highlights, CTAs */
  --color-radiant:       var(--nur-radiant);
  --color-radiant-dark:  var(--nur-radiant-dark);
  --color-radiant-light: var(--nur-radiant-light);
  --color-background:    var(--nur-white);
  --color-surface:       #FFFDF7;
  --color-background-soft: #F7EDD0;
  --color-on-dark:       #FDF6E3;
  --color-gold-text:     #9E7822;
  --color-blush:         var(--nur-blush);

  /* Neutral scale */
  --color-text:          #0F291E;
  --color-text-muted:    #3A5849;
  --color-text-subtle:   #688576;
  --color-border:        #D8D2BE;
  --color-border-light:  #EEE5CF;

  /* Shadows with spiritual hue */
  --shadow-sm:  0 1px 2px 0 rgba(0, 107, 63, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 107, 63, 0.1), 0 2px 4px -2px rgba(0, 107, 63, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 107, 63, 0.1), 0 4px 6px -4px rgba(0, 107, 63, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 107, 63, 0.1), 0 8px 10px -6px rgba(0, 107, 63, 0.1);
  --shadow-gold: 0 0 30px rgba(212, 168, 67, 0.35);
  --shadow-teal: 0 0 30px rgba(27, 122, 61, 0.25);
  --shadow-emerald: 0 0 30px rgba(0, 107, 63, 0.25);

  /* Glassmorphism */
  --glass-bg:      rgba(253, 246, 227, 0.85);
  --glass-border:  rgba(212, 168, 67, 0.2);
  --glass-border-hover: rgba(212, 168, 67, 0.4);
  --glass-card:    rgba(255, 253, 247, 0.94);

  /* Typography */
  --font-arabic: 'Amiri', 'Noto Nastaliq Urdu', serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ==========================================================================
   DARK MODE OVERRIDES (for late night dhikr)
   ========================================================================== */
/* The brand defaults to warm parchment in every system color scheme. */

/* ==========================================================================
   ORDER-SPECIFIC UTILITY CLASSES
   Use these to theme sections by Sufi order
   ========================================================================== */

/* ── Qadri Theme ───────────────────────────────────────────────────────── */
.theme-qadri {
  --color-primary: var(--qadri-emerald);
  --color-primary-dark: var(--qadri-emerald-dark);
  --color-primary-light: var(--qadri-emerald-light);
  --color-primary-pale: var(--qadri-emerald-pale);
  --color-accent: var(--nur-radiant);
}
.theme-qadri .btn-primary {
  background: var(--qadri-emerald);
  color: var(--nur-white);
}
.theme-qadri .btn-primary:hover {
  background: var(--qadri-emerald-dark);
  box-shadow: var(--shadow-emerald);
}
.theme-qadri .badge-order { background: var(--qadri-emerald-pale); color: var(--qadri-emerald-dark); }
.theme-qadri .order-marker { color: var(--qadri-emerald); }

/* ── Chishti Theme ─────────────────────────────────────────────────────── */
.theme-chishti {
  --color-primary: var(--chishti-green);
  --color-primary-dark: var(--chishti-green-dark);
  --color-primary-light: var(--chishti-green-light);
  --color-primary-pale: var(--chishti-green-pale);
  --color-accent: var(--chishti-gold);
}
.theme-chishti .btn-primary {
  background: var(--chishti-green);
  color: var(--nur-white);
}
.theme-chishti .btn-primary:hover {
  background: var(--chishti-green-dark);
  box-shadow: 0 4px 12px rgba(27, 122, 61, 0.4);
}
.theme-chishti .btn-accent {
  background: var(--chishti-gold);
  color: var(--qadri-deep);
}
.theme-chishti .btn-accent:hover {
  background: var(--chishti-gold-dark);
  box-shadow: var(--shadow-gold);
}
.theme-chishti .badge-order { background: var(--chishti-green-pale); color: var(--chishti-green-dark); }
.theme-chishti .order-marker { color: var(--chishti-gold); }

/* ── Divine Light (Nur) Theme ──────────────────────────────────────────── */
.theme-nur {
  --color-primary: var(--nur-radiant);
  --color-primary-dark: var(--nur-radiant-dark);
  --color-primary-light: var(--nur-radiant-light);
  --color-primary-pale: var(--nur-white);
  --color-accent: var(--qadri-emerald);
}
.theme-nur .btn-primary {
  background: var(--nur-radiant);
  color: var(--qadri-deep);
}
.theme-nur .btn-primary:hover {
  background: var(--nur-radiant-dark);
  box-shadow: var(--shadow-gold);
}
.theme-nur .badge-order { background: var(--nur-radiant-light); color: var(--color-gold-text); }
.theme-nur .order-marker { color: var(--nur-radiant); }

/* ==========================================================================
   ORDER BADGES & MARKERS
   ========================================================================== */
.badge-order {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-marker {
  position: relative;
  padding-left: 1.25rem;
}
.order-marker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   SPIRITUAL GRADIENTS
   ========================================================================== */
.gradient-qadri {
  background: linear-gradient(135deg, var(--qadri-emerald) 0%, var(--qadri-emerald-light) 100%);
}
.gradient-chishti {
  background: linear-gradient(135deg, var(--chishti-green) 0%, var(--chishti-gold) 100%);
}
.gradient-nur {
  background: linear-gradient(135deg, var(--nur-radiant) 0%, var(--nur-radiant-light) 100%);
}
.gradient-unity {
  background: linear-gradient(135deg, var(--qadri-emerald) 0%, var(--chishti-green) 50%, var(--nur-radiant) 100%);
}
.gradient-divine {
  background: linear-gradient(135deg, var(--qadri-deep) 0%, var(--qadri-emerald) 50%, var(--chishti-gold) 100%);
}

.text-gradient-qadri {
  background: linear-gradient(135deg, var(--qadri-emerald), var(--qadri-emerald-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-chishti {
  background: linear-gradient(135deg, var(--chishti-green), var(--chishti-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-nur {
  background: linear-gradient(135deg, var(--nur-radiant), var(--nur-radiant-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-unity {
  background: linear-gradient(135deg, var(--qadri-emerald), var(--chishti-green), var(--nur-radiant));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   FOCUS RING (accessible, uses primary)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   SELECTION COLORS
   ========================================================================== */
::selection {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
}

/* ==========================================================================
   SCROLLBAR (webkit)
   ========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }