/* ==========================================================
   VS TECH CCTV SOLUTIONS
   Design System
   Version : 1.0
========================================================== */

:root{

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

/* Primary */

--primary-900:#0B132B;
--primary-800:#1D4ED8;
--primary-700:#00C2FF;
--primary-600:#38BDF8;

/* Neutral */

--white:#FFFFFF;
--gray-50:#F8FAFC;
--gray-100:#E2E8F0;
--gray-200:#CBD5E1;
--gray-300:#94A3B8;
--gray-500:#64748B;
--gray-700:#334155;
--gray-900:#0F172A;

/* Status */

--success:#10B981;
--warning:#F59E0B;
--danger:#EF4444;
--info:#3B82F6;


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

--heading-font:'Space Grotesk',sans-serif;
--body-font:'Inter',sans-serif;


/* Font Size */

--fs-12:12px;
--fs-14:14px;
--fs-16:16px;
--fs-18:18px;
--fs-20:20px;
--fs-24:24px;
--fs-32:32px;
--fs-40:40px;
--fs-48:48px;
--fs-56:56px;
--fs-64:64px;


/* Font Weight */

--fw-300:300;
--fw-400:400;
--fw-500:500;
--fw-600:600;
--fw-700:700;


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

--space-4:4px;
--space-8:8px;
--space-12:12px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-32:32px;
--space-40:40px;
--space-48:48px;
--space-64:64px;
--space-80:80px;
--space-100:100px;
--space-120:120px;


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

--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:28px;
--radius-full:999px;


/*==========================================================
SHADOWS
==========================================================*/

--shadow-sm:
0 5px 15px rgba(15,23,42,.05);

--shadow-md:
0 10px 30px rgba(15,23,42,.08);

--shadow-lg:
0 20px 50px rgba(15,23,42,.12);

--shadow-xl:
0 30px 70px rgba(15,23,42,.15);

--shadow-blue:
0 15px 40px rgba(29,78,216,.25);


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

--gradient-primary:
linear-gradient(
135deg,
#0B132B 0%,
#1D4ED8 60%,
#00C2FF 100%
);

--gradient-button:
linear-gradient(
90deg,
#1D4ED8,
#00C2FF
);

--gradient-dark:
linear-gradient(
180deg,
#0B132B,
#0F172A
);


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

--transition-fast:.25s ease;

--transition:
.35s ease;

--transition-slow:
.6s ease;


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

--container-width:1320px;


/*==========================================================
NAVBAR
==========================================================*/

--navbar-height:90px;


/*==========================================================
BUTTON
==========================================================*/

--button-height:54px;


/*==========================================================
SECTION
==========================================================*/

--section-padding:100px;


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

--z-loader:99999;
--z-navbar:9999;
--z-dropdown:999;
--z-overlay:998;
--z-modal:99999;

}