:root {
        /* ==================== COLORS ==================== */

        /* Primary */
        --color-primary: #3b78ff;
        --color-primary-hover: #2960e6;
        --color-primary-light: rgba(59, 120, 255, 0.1);

        /* Accent Colors */
        --color-accent-orange: #f97316;
        --color-accent-green: #22c55e;
        --color-accent-red: #ef4444;
        --color-accent-yellow: #eab308;

        /* Grey Scale */
        --color-grey-50: #f9fafb;
        --color-grey-100: #f3f4f6;
        --color-grey-200: #e5e7eb;
        --color-grey-300: #d1d5db;
        --color-grey-400: #9ca3af;
        --color-grey-500: #6b7280;
        --color-grey-600: #4b5563;
        --color-grey-700: #374151;
        --color-grey-800: #1f2937;
        --color-grey-900: #111827;

        /* Surface Colors */
        --color-surface: #1e1e2e;
        --color-surface-elevated: #2d2d3a;
        --color-surface-overlay: #252530;
        --color-border: #1a1a24;
        --color-border-light: #3d3d4a;

        /* Background */
        --color-bg-primary: #f7f8fa;
        --color-bg-secondary: #eef0f3;
        --color-bg-tertiary: #e5e8ec;

        /* Text */
        --color-text-primary: #111827;
        --color-text-secondary: #374151;
        --color-text-tertiary: #6b7280;
        --color-text-muted: #9ca3af;
        --color-text-inverse: #ffffff;

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

        --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

        /* Font Sizes */
        --text-xs: 0.75rem;
        /* 12px */
        --text-sm: 0.875rem;
        /* 14px */
        --text-base: 1rem;
        /* 16px */
        --text-lg: 1.125rem;
        /* 18px */
        --text-xl: 1.25rem;
        /* 20px */
        --text-2xl: 1.5rem;
        /* 24px */
        --text-3xl: 1.875rem;
        /* 30px */
        --text-4xl: 2.25rem;
        /* 36px */
        --text-5xl: 3rem;
        /* 48px */
        --text-hero: clamp(2.75rem, 5vw, 4rem);

        /* Font Weights */
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --font-extrabold: 800;
        --font-black: 900;

        /* Line Heights */
        --leading-tight: 1.1;
        --leading-snug: 1.25;
        --leading-normal: 1.5;
        --leading-relaxed: 1.75;

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

        --space-1: 0.25rem;
        /* 4px */
        --space-2: 0.5rem;
        /* 8px */
        --space-3: 0.75rem;
        /* 12px */
        --space-4: 1rem;
        /* 16px */
        --space-5: 1.25rem;
        /* 20px */
        --space-6: 1.5rem;
        /* 24px */
        --space-8: 2rem;
        /* 32px */
        --space-10: 2.5rem;
        /* 40px */
        --space-12: 3rem;
        /* 48px */
        --space-16: 4rem;
        /* 64px */
        --space-20: 5rem;
        /* 80px */

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

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
        --radius-full: 9999px;

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

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
        --shadow-2xl: 0 30px 60px rgba(0, 0, 0, 0.25);

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

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

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

        --z-base: 1;
        --z-dropdown: 10;
        --z-sticky: 20;
        --z-fixed: 30;
        --z-modal: 40;
        --z-tooltip: 50;

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

        --gradient-hero: linear-gradient(180deg,
                        var(--color-bg-primary) 0%,
                        var(--color-bg-secondary) 50%,
                        var(--color-bg-tertiary) 100%);

        --gradient-metallic: linear-gradient(135deg,
                        #374151 0%,
                        #4b5563 30%,
                        #6b7280 50%,
                        #4b5563 70%,
                        #374151 100%);
}