:root { --color-primary: #3561FF; --color-secondary: #6C2DF3; --color-accent: #8148FA; --color-dark: #0D1B2A; --color-text: #000000; --color-text-secondary: #666666; --color-bg: #FFFFFF; --color-bg-soft: #F8F8FF; --color-bg-card: #F0EEFF; --color-border: #E5E7EB; --gradient-primary: linear-gradient(86.07deg, #3561FF 7.23%, #6C2DF3 83.92%); --gradient-text: linear-gradient(93.62deg, #3561FF 12.25%, #8148FA 38.9%); --gradient-banner: linear-gradient(180deg, #3561FF 0%, #6C2DF3 100%); --gradient-card-top: linear-gradient(90deg, #3561FF, #6C2DF3); --font-primary: 'Inter', sans-serif; --font-serif: 'Playfair Display', serif; --font-size-h1: 74px; --font-size-h2: 48px; --font-size-h3: 48px; --font-size-h4: 40px; --font-size-h5: 30px; --font-size-body-lg: 18px; --font-size-body: 16px; --font-size-small: 14px; --font-weight-bold: 700; --font-weight-normal: 400; --line-height-heading: 120%; --line-height-body: 150%; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 48px; --spacing-xl: 64px; --spacing-2xl: 104px; --spacing-section: 112px; --border-radius-sm: 6px; --border-radius-md: 10px; --border-radius-lg: 16px; --border-radius-pill: 30px; --shadow-card: 0px 24px 48px -24px rgba(0,0,0,0.1); --shadow-sm: 0 2px 8px rgba(53,97,255,0.08); --shadow-md: 0 4px 20px rgba(53,97,255,0.12); --shadow-lg: 0 8px 32px rgba(53,97,255,0.15); --shadow-hero-chart: 0 20px 60px rgba(0,0,0,0.08), 0 4px 20px rgba(53,97,255,0.06); --transition: all 0.2s ease; }