@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap');

:root {
    /* ── Brand Colors ──────────────────────────── */
    --color-primary:       #154C20;
    --color-primary-mid:   #2A8C3A;
    --color-primary-light: #43A84F;
    --color-primary-pale:  #E8F5EA;
    --color-accent:        #F5A500;
    --color-accent-dark:   #D48C00;
    --color-accent-pale:   #FFF8E7;

    /* ── Neutrals ──────────────────────────────── */
    --color-white:         #FFFFFF;
    --color-off-white:     #F5F5F0;
    --color-border:        #D9D9D9;
    --color-border-light:  #EFEFEF;
    --color-text:          #1A1A1A;
    --color-text-muted:    #5A5A5A;
    --color-text-light:    #888888;

    /* ── Typography ────────────────────────────── */
    --font-en:        'Inter', sans-serif;
    --font-ur:        'Noto Nastaliq Urdu', serif;
    --font-base:      var(--font-en);

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-urdu:   2.2;

    /* ── Spacing ───────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout ────────────────────────────────── */
    --container-max: 1200px;
    --container-pad: var(--space-6);
    --section-gap:   var(--space-20);
    --card-gap:      var(--space-6);

    /* ── Border & Radius ───────────────────────── */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-full:  9999px;
    --border-width: 1px;
    --border:       var(--border-width) solid var(--color-border);

    /* ── Shadows ───────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl:    0 18px 48px rgba(21,76,32,0.14);
    --shadow-green: 0 4px 16px rgba(21,76,32,0.20);
    --focus-ring:   0 0 0 3px rgba(245,165,0,0.35);

    /* ── Transitions ───────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Z-index ───────────────────────────────── */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;

    /* ── White Overlays ────────────────────────── */
    --color-white-85:  rgba(255,255,255,0.85);
    --color-white-80:  rgba(255,255,255,0.80);
    --color-white-70:  rgba(255,255,255,0.70);
    --color-white-60:  rgba(255,255,255,0.60);
    --color-white-50:  rgba(255,255,255,0.50);
    --color-white-15:  rgba(255,255,255,0.15);
    --color-white-12:  rgba(255,255,255,0.12);
    --color-white-10:  rgba(255,255,255,0.10);
    --card-lift:       3px;

    /* ── Hero ──────────────────────────────────── */
    --hero-min-height:    600px;
    --hero-overlay-color: rgba(21,76,32,0.72);
    --hero-bg-image:      url('../images/hero-section.jpg');

    /* ── Nav ───────────────────────────────────── */
    --nav-height:    72px;
    --nav-bg:        var(--color-primary);
    --nav-text:      var(--color-white);
    --nav-hover:     var(--color-accent);
}

@media (max-width: 768px) {
    :root {
        --container-pad: var(--space-4);
        --section-gap: var(--space-16);
        --card-gap: var(--space-4);
        --hero-min-height: 520px;
    }
}

[lang="ur"],
.rtl {
    --font-base:      var(--font-ur);
    --leading-normal: var(--leading-urdu);
    direction: rtl;
    text-align: right;
}