/* ==========================================================
   CRESTBRIDGE PREMIUM DESIGN SYSTEM
   Variables v3.0
========================================================== */

:root{

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

--navy:#163A63;
--navy-dark:#0F2745;
--navy-light:#204F83;

--blue:#A8D3F7;

--gold:#C8A45D;
--gold-light:#DFC48A;

--silver:#ECEFF2;
--silver-dark:#D9E0E6;

--white:#F8F9FB;

--charcoal:#273043;
--black:#111827;

--gray:#D3D3D3;


/* ==========================================================
   TEXT COLOURS
========================================================== */

--text:#394553;
--text-light:#6D7682;
--text-muted:#8A94A3;


/* ==========================================================
   BORDERS
========================================================== */

--border:rgba(22,58,99,.10);
--border-light:rgba(22,58,99,.06);
--border-dark:rgba(22,58,99,.18);


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

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

--fs-xs:12px;
--fs-sm:14px;
--fs-md:16px;
--fs-lg:18px;
--fs-xl:20px;
--fs-2xl:24px;
--fs-3xl:32px;
--fs-4xl:42px;
--fs-5xl:56px;
--fs-display:72px;

--lh-tight:1.10;
--lh-heading:1.15;
--lh-body:1.80;


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

--space-xs:8px;
--space-sm:16px;
--space-md:24px;
--space-lg:40px;
--space-xl:60px;
--space-2xl:80px;
--space-3xl:120px;

--space-section-top:72px;
--space-section-bottom:36px;

--space-section-top-tablet:60px;
--space-section-bottom-tablet:30px;

--space-section-top-mobile:48px;
--space-section-bottom-mobile:24px;

--space-section-sm-top:80px;
--space-section-sm-bottom:40px;

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

/* Section spacing */
--space-section: 7.5rem;          /* 120px */
--space-section-tablet: 5.625rem; /* 90px */
--space-section-mobile: 4rem;     /* 64px */

/* Internal section spacing */
--space-header: 4rem;             /* 64px */
--space-header-tablet: 3rem;      /* 48px */
--space-header-mobile: 2rem;      /* 32px */

/* Content spacing */
--space-content: 2rem;            /* 32px */
--space-content-tablet: 1.5rem;   /* 24px */
--space-content-mobile: 1.25rem;  /* 20px */

/* ==========================================================
   CONTENT WIDTHS
========================================================== */

--content-sm:640px;
--content-md:820px;
--content-lg:980px;
--content-xl:1200px;
--content-reading:720px;
--content-editorial:900px;
--container:1440px;


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

--radius-xs:8px;
--radius-sm:12px;
--radius-md:18px;
--radius-lg:28px;
--radius-xl:42px;


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

--shadow-sm:
0 4px 12px rgba(15,39,69,.05);

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

--shadow-lg:
0 24px 60px rgba(15,39,69,.12);


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

--transition-fast:.20s ease;

--transition:
.35s cubic-bezier(.4,0,.2,1);

--transition-slow:
.55s cubic-bezier(.4,0,.2,1);

/* Animation */

--duration-fast:.35s;

--duration:.65s;

--duration-slow:.85s;

--ease:cubic-bezier(.4,0,.2,1);


/* ==========================================================
   NAVIGATION
========================================================== */

--navbar-height:88px;


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

--gradient-primary:
linear-gradient(
135deg,
var(--navy),
var(--navy-dark)
);

--gradient-gold:
linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);

--gradient-silver:
linear-gradient(
180deg,
#FFFFFF,
var(--silver)
);


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

--z-nav:1000;
--z-dropdown:1010;
--z-overlay:1020;
--z-modal:1030;

}