/* ==========================================================
   ML~NU Design System
   variables.css
========================================================== */

:root{

/*==========================================================
  BRAND COLOURS
==========================================================*/

--color-primary:#071B35;
--color-primary-light:#0C2D57;

--color-secondary:#D4AF37;
--color-secondary-light:#E8C766;

--color-accent:#6BAA75;

--color-white:#FFFFFF;
--color-off-white:#F7F8FA;

--color-text:#20242A;
--color-text-light:#667085;

--color-border:#E5E7EB;

--color-success:#16A34A;
--color-warning:#D97706;
--color-danger:#DC2626;

/*==========================================================
  BACKGROUNDS
==========================================================*/

--bg-body:#FFFFFF;

--bg-section:#FFFFFF;

--bg-alt:#F5F7FA;

--bg-dark:#071B35;

--bg-card:#FFFFFF;

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

--font-heading:'Cinzel',serif;

--font-body:'Inter',sans-serif;

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

--fs-xs:0.75rem;
--fs-sm:0.875rem;
--fs-base:1rem;
--fs-md:1.125rem;
--fs-lg:1.25rem;
--fs-xl:1.5rem;
--fs-2xl:2rem;
--fs-3xl:2.75rem;
--fs-4xl:3.5rem;
--fs-5xl:4.5rem;

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

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

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

--lh-tight:1.15;
--lh-heading:1.2;
--lh-normal:1.6;
--lh-loose:1.8;

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

--space-0:0;

--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.5rem;
--space-6:2rem;
--space-7:2.5rem;
--space-8:3rem;
--space-9:4rem;
--space-10:5rem;
--space-11:6rem;
--space-12:8rem;

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

--radius-sm:6px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:28px;
--radius-round:999px;

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

--shadow-sm:
0 2px 6px rgba(0,0,0,.05);

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

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

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

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

--transition-fast:.2s ease;

--transition:
.35s ease;

--transition-slow:
.6s ease;

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

--container-width:1280px;

--container-padding:24px;

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

--header-height:90px;

/*==========================================================
  BUTTONS
==========================================================*/

--button-height:54px;

--button-radius:999px;

/*==========================================================
  CARDS
==========================================================*/

--card-radius:20px;

--card-padding:2rem;

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

--z-dropdown:100;

--z-header:1000;

--z-modal:5000;

}

/*==========================================================
  LARGE DESKTOP
==========================================================*/

@media (max-width:1400px){

:root{

--container-width:1180px;

}

}

/*==========================================================
  TABLET
==========================================================*/

@media (max-width:992px){

:root{

--fs-5xl:3.75rem;

--fs-4xl:3rem;

--fs-3xl:2.4rem;

--space-12:6rem;

}

}

/*==========================================================
  MOBILE
==========================================================*/

@media (max-width:768px){

:root{

--header-height:72px;

--container-padding:20px;

--fs-5xl:3rem;

--fs-4xl:2.5rem;

--fs-3xl:2rem;

--fs-2xl:1.75rem;

--space-11:4rem;

--space-12:5rem;

}

}

/*==========================================================
  SMALL MOBILE
==========================================================*/

@media (max-width:480px){

:root{

--container-padding:18px;

--fs-5xl:2.4rem;

--fs-4xl:2rem;

--fs-3xl:1.75rem;

}

}