:root {

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

--color-primary: #1e40af;
--color-primary-dark: #1e3a8a;
--color-primary-light: #e0e7ff;

--color-secondary: #15803d;
--color-secondary-dark: #166534;
--color-secondary-light: #dcfce7;

--color-tertiary: #f59e0b;
--color-tertiary-dark: #d97706;
--color-tertiary-light: #fff7ed;

--color-accent: #0f172a;
--color-accent-dark: #020617;
--color-accent-light: #e2e8f0;

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

--color-bg: #ffffff;
--color-bg-alt: #f8fafc;
--color-bg-soft: #f1f5f9;
--color-bg-dark: #0f172a;

--color-white: #ffffff;
--color-light: #f1f5f9;
--color-light2: #e8f0fe;
--color-surface: #f8fafc;

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

--color-heading: #0f172a;
--color-text: #334155;
--color-muted: #64748b;
--color-border: #e2e8f0;

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

--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Nunito', sans-serif;

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

--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 28px;

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

--shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
--shadow-md: 0 10px 30px rgba(0,0,0,0.08);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.12);

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

--transition-fast: 0.15s ease;
--transition: 0.25s ease;
--transition-slow: 0.4s ease;

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

--spacing-xs: 6px;
--spacing-sm: 12px;
--spacing-md: 20px;
--spacing-lg: 36px;
--spacing-xl: 56px;
--spacing-xxl: 80px;

}