/* =====================================
   AZZAWAJ DESIGN SYSTEM (ELITE VERSION)
   Brand-Aligned + Scalable + Modern UI
===================================== */

:root {

    /* ================= COLORS ================= */

    /* BRAND (FROM LOGO) */
    --primary: #2A96C1;        /* Blue */
    --primary-dark: #1f7ea3;
    --secondary: #4CAF50;      /* Green */
    --secondary-dark: #388e3c;
    --accent: #F57C00;         /* Orange */
    --accent-dark: #e66a00;
    --danger: #E53935;         /* Red */

    /* UI COLORS */
    --highlight: #C8E36A;

    /* TEXT */
    --text: #222;
    --text-light: #666;
    --text-muted: #999;

    /* BACKGROUNDS */
    --white: #ffffff;
    --bg-light: #f9f9f9;
    --bg-soft: #f5f7fa;
    --bg-dark: #111;
    --bg-overlay: rgba(0,0,0,0.5);

    /* BORDERS */
    --border: #e5e5e5;
    --border-light: #f1f1f1;

    /* ================= TYPOGRAPHY ================= */

    --font-primary: 'Open Sans', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    /* FONT SIZES (FLUID READY) */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 44px;

    /* FONT WEIGHTS */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ================= SPACING ================= */

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;

    /* ================= RADIUS ================= */

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ================= SHADOW ================= */

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

    /* ================= TRANSITIONS ================= */

    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ================= Z-INDEX ================= */

    --z-header: 1000;
    --z-overlay: 9998;
    --z-menu: 10000;

    /* ================= CONTAINER ================= */

    --container-width: 1200px;

    /* ================= GRADIENTS ================= */

    --gradient-primary: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    --gradient-accent: linear-gradient(
        135deg,
        var(--accent),
        #ff9800
    );
}

/* ================= DARK MODE ================= */

[data-theme="dark"] {

    --text: #eee;
    --text-light: #bbb;
    --text-muted: #888;

    --white: #1a1a1a;
    --bg-light: #222;
    --bg-soft: #2a2a2a;
    --bg-dark: #000;

    --border: #333;
    --border-light: #444;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow: 0 5px 15px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.7);
}