:root {

    /* =========================
       BRAND COLORS
    ========================== */
    --primary: #6366f1;
    --primary-dark:#4f46e5;
    --primary-hover: #4f46e5;

    --secondary: #06b6d4;
    --secondary-hover: #0891b2;
    
    --bg:#f4f7fb;

    /* =========================
       STATUS COLORS
    ========================== */
    --success: #22c55e;
    --success-hover: #16a34a;

    --warning: #f59e0b;
    --warning-hover: #d97706;

    --danger: #ef4444;
    --danger-hover: #dc2626;

    --info: #0ea5e9;

    /* =========================
       LIGHT UI
    ========================== */
    --background: #f1f5f9;

    --card-bg: #ffffff;

    --navbar-bg: #ffffff;

    --text-color: #0f172a;
     --text:#334155;
    --muted-text: #64748b;

    --border-color: #dbeafe;

    /* =========================
       DARK / GLASS UI
    ========================== */
    --dark: #020617;

    --sidebar-bg: #111827;

    --sidebar-text: #f9fafb;

    --glass-card: rgba(15, 23, 42, 0.72);

    --glass-border: rgba(255, 255, 255, 0.12);

    --glass-text: #f8fafc;

    --glass-muted: #94a3b8;

    /* =========================
       ALIAS SUPPORT
    ========================== */

    --card: var(--glass-card);

    --border: var(--glass-border);

    --text: var(--glass-text);

    --muted: var(--glass-muted);

    /* =========================
       SHADOWS
    ========================== */
    
    --shadow:0 12px 35px rgba(15,23,42,.12);
    --shadow-sm:
        0 2px 6px rgba(0, 0, 0, 0.05);

    --shadow:
        0 4px 10px rgba(0, 0, 0, 0.08);

    --shadow-lg:
        0 10px 25px rgba(0, 0, 0, 0.12);

    --shadow-xl:
        0 20px 45px rgba(0, 0, 0, 0.18);

    /* =========================
       BORDER RADIUS
    ========================== */
    --radius-sm: 8px;

    --radius: 12px;

    --radius-lg: 18px;

    --radius-xl: 28px;

    /* =========================
       TRANSITION
    ========================== */
    --transition:
        all 0.25s ease;

    /* =========================
       Z-INDEX
    ========================== */
    --z-sidebar: 1000;

    --z-navbar: 1010;

    --z-modal: 1050;

    --z-toast: 1100;

    /* =========================
       TYPOGRAPHY
    ========================== */
    --font-family:
        'Inter',
        'Segoe UI',
        sans-serif;

    --font-size-xs: 12px;

    --font-size-sm: 14px;

    --font-size: 15px;

    --font-size-md: 16px;

    --font-size-lg: 18px;

    --font-size-xl: 22px;

    --font-size-2xl: 30px;

    /* =========================
       LAYOUT
    ========================== */
    --sidebar-width: 260px;

    --navbar-height: 70px;

    --container-width: 1400px;
    
    
    --sidebar:#0f172a;
    --sidebar-2:#111827;

}