/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL DESIGN VARIABLES

   File:
   /public_html/assets/css/variables.css

   Production Version
====================================================== */



:root{


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


--primary:#0b1f3a;

--primary-light:#12345d;

--secondary:#e60000;

--secondary-dark:#b80000;


--white:#ffffff;

--black:#000000;


--text:#333333;

--text-light:#666666;


--background:#f5f7fa;

--surface:#ffffff;


--border:#e5e7eb;



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


--primary-gradient:

linear-gradient(
135deg,
#0b1f3a,
#163f70
);



--secondary-gradient:

linear-gradient(
135deg,
#e60000,
#ff3b3b
);





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


--font-primary:

'Poppins',
sans-serif;


--font-secondary:

'Inter',
sans-serif;



--heading-weight:700;

--body-weight:400;



/* ======================================================
   FONT SIZES
====================================================== */


--text-xs:.75rem;

--text-sm:.875rem;

--text-base:1rem;

--text-lg:1.125rem;

--text-xl:1.35rem;


--heading-sm:1.8rem;

--heading-md:2.4rem;

--heading-lg:3.2rem;

--heading-xl:4rem;





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


--container-width:1200px;


--container-padding:

20px;





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


--space-1:5px;

--space-2:10px;

--space-3:15px;

--space-4:20px;

--space-5:30px;

--space-6:40px;

--space-7:60px;

--space-8:80px;





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


--radius-sm:8px;

--radius-md:15px;

--radius-lg:25px;

--radius-xl:40px;


--radius-pill:999px;





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


--shadow-sm:

0 4px 12px rgba(0,0,0,.08);



--shadow-md:

0 10px 30px rgba(0,0,0,.12);



--shadow-lg:

0 20px 50px rgba(0,0,0,.18);





/* ======================================================
   HEADER
====================================================== */


--header-height:85px;

--header-height-mobile:72px;

--header-height-scroll:70px;





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


--transition:

.35s ease;



--transition-fast:

.2s ease;



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


--z-header:9999;

--z-menu:10000;

--z-modal:11000;

--z-tooltip:12000;





/* ======================================================
   RESPONSIVE BREAKPOINTS
====================================================== */


--mobile:480px;

--tablet:768px;

--desktop:1100px;



}