/* ========================================
   DESIGN SYSTEM TOKENS — single source of truth
   Everything else should reference these vars.
   ======================================== */

:root {
    /* ────────────────────────────────────────
       BRAND / PRIMARY
       ──────────────────────────────────────── */
    --color-primary: #e3bc3b;
    --color-primary-hover: #ebd075;
    --color-primary-dark: #c5a028;
    --color-gold: #c9a227;
    --color-gold-dark: #a88a1e;
    --color-gold-light: #d4b44a;
    --color-gold-soft: #c9a961;
    --color-gold-soft-hover: #dbbe7a;
    --color-cream: #e8d5a3;

    /* ────────────────────────────────────────
       BACKGROUNDS
       ──────────────────────────────────────── */
    --color-bg-light: #f8f7f6;
    --color-bg-dark: #171611;
    --color-bg-darker: #0b0f15;
    --color-bg-deep: #111620;
    --color-bg-navy-deep: #0f141c;
    --color-surface-dark: #232018;
    --color-surface-light: #ffffff;
    --color-surface-darker: #1e293b;
    --color-surface-card: #232a3b;

    /* ────────────────────────────────────────
       PILLARS (Five Pillars accent palette)
       ──────────────────────────────────────── */
    --color-mandala-navy: #0f1419;
    --color-pillar-shahada: #d4af37;
    --color-pillar-salah: #1a5f5f;
    --color-pillar-salah-hover: #247f7f;
    --color-pillar-zakat: #b87333;
    --color-pillar-zakat-hover: #d98a40;
    --color-pillar-sawm: #0d4d4d;
    --color-pillar-sawm-hover: #156e6e;
    --color-pillar-hajj: #c9a961;
    --color-pillar-hajj-hover: #dbbe7a;

    /* ────────────────────────────────────────
       DARK NAVY / FAQ
       ──────────────────────────────────────── */
    --color-navy: #1a1a2e;
    --color-navy-deep: #16213e;
    --color-faq-navy: #1a2332;
    --color-faq-gold: #d4af37;
    --color-faq-cream: #f8f6f0;

    /* ────────────────────────────────────────
       NATURE / ACCENT
       ──────────────────────────────────────── */
    --color-green-dark: #1a472a;
    --color-success: #4caf50;
    --color-error: #f44336;

    /* ────────────────────────────────────────
       TEXT
       ──────────────────────────────────────── */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b7b29e;
    --color-text-muted: #dcdcdc;
    --color-text-soft: #e2e0d9;
    --color-text-dark: #171611;
    --color-text-gray-100: #f3f4f6;
    --color-text-gray-200: #e5e7eb;
    --color-text-gray-300: #e8e8e8;
    --color-text-gray-400: #a0a0a0;
    --color-text-gray-500: #6b7280;
    --color-text-gray-600: #4b5563;
    --color-text-gray-700: #374151;
    --color-text-gray-800: #232a3b;

    /* Black & white (use these instead of literal) */
    --color-white: #ffffff;
    --color-white-short: #fff;
    --color-black: #000000;
    --color-black-short: #000;
    --color-light-content: #e2e8f0;

    /* ────────────────────────────────────────
       UI / BORDERS
       ──────────────────────────────────────── */
    --color-border: #383429;
    --color-border-light: rgba(56, 52, 41, 0.3);
    --color-border-cream: #fef3c7;
    --color-border-soft: #f1f5f9;

    /* Translucent overlays */
    --overlay-black-90: rgba(0, 0, 0, 0.9);
    --overlay-black-70: rgba(0, 0, 0, 0.7);
    --overlay-black-50: rgba(0, 0, 0, 0.5);
    --overlay-black-40: rgba(0, 0, 0, 0.4);
    --overlay-black-30: rgba(0, 0, 0, 0.3);
    --overlay-black-20: rgba(0, 0, 0, 0.2);
    --overlay-black-10: rgba(0, 0, 0, 0.1);
    --overlay-black-05: rgba(0, 0, 0, 0.05);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-05: rgba(255, 255, 255, 0.05);
    --overlay-white-04: rgba(255, 255, 255, 0.04);
    --overlay-white-03: rgba(255, 255, 255, 0.03);
    --overlay-gold-30: rgba(201, 162, 39, 0.3);
    --overlay-gold-10: rgba(201, 162, 39, 0.1);

    /* ────────────────────────────────────────
       TYPOGRAPHY
       ──────────────────────────────────────── */

    /* Display + body fonts (default for Arabic-style UI) */



    --font-display: "Noto Kufi Arabic", "Manrope", sans-serif;
    --font-body: "Cairo", "Manrope", sans-serif;

    /* Per-language fonts (used by [lang] selectors / overrides) */
    --font-ar: "Cairo", "Noto Kufi Arabic", "Manrope", sans-serif;
    --font-en: "Manrope", "Inter", "Roboto", sans-serif;
    --font-ur: "Alvi Nastaleeq", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq Kasheeda", serif;

    /* Specialised */
    --font-quran: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
    --font-icon: "Material Symbols Outlined";

    /* Font sizes */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.85rem;     /* ~13.6px */
    --fs-base: 0.95rem;   /* ~15.2px */
    --fs-md: 1rem;        /* 16px */
    --fs-lg: 1.05rem;     /* ~16.8px */
    --fs-xl: 1.1rem;      /* ~17.6px */
    --fs-2xl: 1.25rem;    /* 20px */
    --fs-3xl: 1.5rem;     /* 24px */
    --fs-4xl: 1.875rem;   /* 30px */
    --fs-5xl: 2.5rem;     /* 40px */
    --fs-6xl: 3rem;       /* 48px */

    /* ────────────────────────────────────────
       LAYOUT
       ──────────────────────────────────────── */
    --max-width: 1280px;
    --max-width-wide: 1400px;
    --header-height: 5rem;

    /* ────────────────────────────────────────
       SPACING
       ──────────────────────────────────────── */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ────────────────────────────────────────
       BORDER RADIUS
       ──────────────────────────────────────── */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ────────────────────────────────────────
       TRANSITIONS
       ──────────────────────────────────────── */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;

    /* ────────────────────────────────────────
       SHADOWS
       ──────────────────────────────────────── */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.4);
    --shadow-card-hover-glow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.1);

    /* ────────────────────────────────────────
       Z-INDEX
       ──────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9999;
}