/* ==========================================================
   HOMIE DESIGN SYSTEM
   VARIABLES.CSS
   Version : 1.0
========================================================== */

:root{

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

/* Primary */

--primary:#11B95A;
--primary-dark:#0E9B4B;
--primary-light:#58D98E;
--primary-extra-light:#EAF9F0;

/* Navy */

--navy:#062746;
--navy-dark:#021A31;
--navy-deep:#00101F;
--navy-light:#124A74;

/* Gray */

--gray-50:#FAFBFC;
--gray-100:#F4F6F8;
--gray-200:#E9EDF2;
--gray-300:#D8DEE6;
--gray-400:#B8C2CC;
--gray-500:#94A3B8;
--gray-600:#64748B;
--gray-700:#475569;
--gray-800:#334155;
--gray-900:#1E293B;

/* Text */

--text:#18212A;
--text-light:#6B7280;
--text-white:#FFFFFF;

/* Background */

--background:#FFFFFF;
--background-soft:#F8FAFB;
--background-dark:#031B33;

/* Border */

--border:#E4EAF0;
--border-dark:#CBD5E1;

/* Status */

--success:#22C55E;
--warning:#F59E0B;
--danger:#EF4444;
--info:#0EA5E9;


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

--font-family:
"Prompt",
"Kanit",
sans-serif;

--font-size-xs:12px;
--font-size-sm:14px;
--font-size-md:16px;
--font-size-lg:18px;
--font-size-xl:20px;

--font-h1:64px;
--font-h2:46px;
--font-h3:34px;
--font-h4:28px;
--font-h5:22px;
--font-h6:18px;

--font-weight-light:300;
--font-weight-normal:400;
--font-weight-medium:500;
--font-weight-semibold:600;
--font-weight-bold:700;


/*==========================================================
= LINE HEIGHT
==========================================================*/

--line-height-tight:1.2;
--line-height-normal:1.6;
--line-height-relaxed:1.8;


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

--container:1320px;

--section-padding:100px;

--section-padding-mobile:60px;


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

--radius-xs:6px;
--radius-sm:10px;
--radius-md:16px;
--radius-lg:24px;
--radius-xl:32px;
--radius-pill:999px;


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

--shadow-xs:
0 2px 6px rgba(0,0,0,.04);

--shadow-sm:
0 6px 18px rgba(0,25,48,.06);

--shadow-md:
0 12px 30px rgba(0,25,48,.10);

--shadow-lg:
0 22px 50px rgba(0,25,48,.14);

--shadow-xl:
0 35px 80px rgba(0,25,48,.18);


/*==========================================================
= TRANSITION
==========================================================*/

--transition-fast:.2s;

--transition:.3s;

--transition-slow:.45s;


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

--topbar-height:38px;

--navbar-height:88px;

--navbar-height-scroll:74px;


/*==========================================================
= HERO
==========================================================*/

--hero-height:720px;


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

--z-dropdown:1000;

--z-sticky:1020;

--z-fixed:1030;

--z-modal:1050;

}


/*==========================================================
= BREAKPOINT
==========================================================*/

:root{

--screen-xl:1400px;

--screen-lg:1200px;

--screen-md:992px;

--screen-sm:768px;

--screen-xs:576px;

}