/**
 * ZameenPro - CSS Design Variables
 * Nature-inspired color system with earthy greens and warm tones.
 */

:root {
    /* ── Nature-Inspired Palette ──────────────────────────── */
    --color-forest-900:   #0d1f17;
    --color-forest-800:   #142e22;
    --color-forest-700:   #1a3a2a;
    --color-forest-600:   #1e4d38;
    --color-forest-500:   #2d6a4f;
    --color-forest-400:   #40916c;
    --color-forest-300:   #52b788;
    --color-forest-200:   #74c69d;
    --color-forest-100:   #95d5b2;
    --color-forest-50:    #d8f3dc;

    --color-earth-900:    #3e2723;
    --color-earth-700:    #5d4037;
    --color-earth-500:    #795548;
    --color-earth-300:    #a1887f;
    --color-earth-100:    #d7ccc8;
    --color-earth-50:     #efebe9;

    --color-wheat-500:    #dda15e;
    --color-wheat-400:    #e9c46a;
    --color-wheat-300:    #f2e2b6;
    --color-wheat-100:    #fefae0;

    --color-sky-500:      #219ebc;
    --color-sky-400:      #48cae4;
    --color-sky-100:      #caf0f8;

    /* ── Semantic Colors ─────────────────────────────────── */
    --primary:            var(--color-forest-500);
    --primary-hover:      var(--color-forest-400);
    --primary-light:      var(--color-forest-50);
    --primary-dark:       var(--color-forest-700);

    --success:            #2d9e5e;
    --success-bg:         #e8f5e9;
    --warning:            #e67e22;
    --warning-bg:         #fff3e0;
    --danger:             #c62828;
    --danger-bg:          #ffebee;
    --info:               var(--color-sky-500);
    --info-bg:            var(--color-sky-100);

    /* ── Surfaces (Light Mode) ───────────────────────────── */
    --bg-body:            #f4f7f5;
    --bg-card:            #ffffff;
    --bg-sidebar:         var(--color-forest-800);
    --bg-topbar:          #ffffff;
    --bg-input:           #f8faf9;
    --bg-hover:           #ecf5f0;

    --border-color:       #dce5df;
    --border-light:       #e8ede9;
    --border-focus:       var(--primary);

    /* ── Text ────────────────────────────────────────────── */
    --text-primary:       #1a2e23;
    --text-secondary:     #4a6b56;
    --text-muted:         #7d9b88;
    --text-inverse:       #ffffff;
    --text-on-primary:    #ffffff;

    /* ── Typography ──────────────────────────────────────── */
    --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-urdu:          'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
    --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:            0.75rem;
    --text-sm:            0.8125rem;
    --text-base:          0.9375rem;
    --text-lg:            1.0625rem;
    --text-xl:            1.25rem;
    --text-2xl:           1.5rem;
    --text-3xl:           1.875rem;
    --text-4xl:           2.25rem;

    --leading-tight:      1.25;
    --leading-normal:     1.5;
    --leading-relaxed:    1.75;

    /* ── 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;

    /* ── Borders & Radius ────────────────────────────────── */
    --radius-sm:          0.375rem;
    --radius-md:          0.625rem;
    --radius-lg:          0.875rem;
    --radius-xl:          1.25rem;
    --radius-full:        9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-xs:          0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:          0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg:          0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl:          0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --shadow-card:        0 2px 8px rgba(26,46,35,0.06);
    --shadow-float:       0 8px 30px rgba(26,46,35,0.12);

    /* ── Transitions ─────────────────────────────────────── */
    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:        cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast:      150ms;
    --duration-normal:    250ms;
    --duration-slow:      400ms;

    /* ── Layout ──────────────────────────────────────────── */
    --sidebar-width:      260px;
    --topbar-height:      60px;
    --bottom-nav-height:  64px;
    --container-max:      1200px;
}

/* ── Dark Mode ───────────────────────────────────────────── */
.dark-mode {
    --bg-body:          #0e1a13;
    --bg-card:          #162219;
    --bg-sidebar:       #0a1410;
    --bg-topbar:        #162219;
    --bg-input:         #1a2e23;
    --bg-hover:         #1e3a2b;

    --border-color:     #2a4336;
    --border-light:     #1e3328;

    --text-primary:     #e8f5ec;
    --text-secondary:   #a3c4b0;
    --text-muted:       #6b9d7d;

    --shadow-card:      0 2px 8px rgba(0,0,0,0.2);
    --shadow-float:     0 8px 30px rgba(0,0,0,0.3);
}