:root {

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

--color-primary: #2563EB;
--color-primary-dark: #1D4ED8;
--color-primary-light: #DBEAFE;

--color-accent: #F59E0B;
--color-accent-light: #FEF3C7;

--color-success: #16A34A;

--color-white: #FFFFFF;
--color-background: #F8FAFC;
--color-surface: #FFFFFF;

--color-text: #1F2937;
--color-text-light: #4B5563;
--color-text-muted: #6B7280;

--color-border: #E5E7EB;

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

--color-shadow-hover:
0 30px 60px rgba(15,23,42,.12);

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

--font-main:
"Inter",
"Segoe UI",
Roboto,
sans-serif;

--font-heading:
"Inter",
sans-serif;

--font-size-xs: .75rem;
--font-size-sm: .875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.75rem;
--font-size-5xl: 3.5rem;

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

--line-height: 1.7;
--line-height-heading: 1.2;

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

--container-width: 1200px;

--container-padding: 20px;

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

--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 36px;
--radius-round: 999px;

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

--space-xs: 8px;
--space-sm: 12px;
--space-md: 20px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 72px;
--space-3xl: 120px;

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

--transition-fast: .2s ease;

--transition:
.35s ease;

--transition-slow:
.6s ease;

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

--button-height: 56px;

--button-padding:
0 34px;

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

--header-height: 82px;

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

--z-header: 100;
--z-menu: 500;
--z-modal: 900;
--z-scroll: 999;

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

--gradient-primary:

linear-gradient(
135deg,
#2563EB,
#3B82F6
);

--gradient-light:

linear-gradient(
180deg,
#FFFFFF,
#F8FAFC
);

--gradient-accent:

linear-gradient(
135deg,
#FBBF24,
#F59E0B
);

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

--hero-padding-top: 110px;
--hero-padding-bottom: 110px;

}