/* ================================
   ROOT VARIABLES (DESIGN SYSTEM)
================================ */

:root{

/* ================================
   COLOR PALETTE
================================ */

/* Primary Colors */
--color-primary: #2563EB;
--color-primary-light: #3B82F6;
--color-primary-dark: #1E40AF;

/* Accent Colors */
--color-accent: #06B6D4;
--color-accent-light: #67E8F9;

/* Neutral Colors */
--color-white: #FFFFFF;
--color-black: #000000;

--color-gray-100: #F9FAFB;
--color-gray-200: #E5E7EB;
--color-gray-300: #D1D5DB;
--color-gray-400: #9CA3AF;
--color-gray-500: #6B7280;
--color-gray-600: #4B5563;
--color-gray-700: #374151;
--color-gray-800: #1F2937;
--color-gray-900: #28b40c;

/* Background & Text */
--background-color: var(--color-gray-600);
--text-color: var(--color-gray-900);
--heading-color: var(--color-gray-800);


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

--font-primary: "Segoe UI", Arial, sans-serif;
--font-secondary: "Poppins", sans-serif;

--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-size-xxl: 36px;
--font-size-hero: 48px;

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

--line-height-base: 1.6;


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

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--space-xxl: 64px;


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

--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-round: 50%;


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

--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 20px rgba(0,0,0,0.15);


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

--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;


/* ================================
   LAYOUT
================================ */

--container-width: 1200px;
--container-padding: 20px;


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

--z-navbar: 1000;
--z-modal: 2000;
--z-tooltip: 3000;

}