:root {
    /* Brand Colors */
    --color-primary: #000000;
    --color-primary-dark: #3a0647;
    --color-accent: #0066cc;

    /* Gradient (store as value, not as color) */
    --gradient-primary: linear-gradient(90deg, #030D21, #1B48A3);

    /* Neutral Colors */
    --color-bg-light: #f7f7f7;
    --color-bg-white: #ffffff;
    --color-border: #d6d5d5;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;

    /* Text Colors - Dark Theme */
    --color-text-white: #FFFFFF;
    --color-text-off-white: #FAFAFF;
    --color-text-light: #C8CED4;
    --color-text-light-gray: #E6E9EC;
    --color-text-muted: #A5ABB4;
    --color-text-subtle: #626971;

    /* Status Colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

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

    /* Font Family */
    --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ----------------------------------------
       Display - Extra Large Headlines
       Used for: HowItWorks title, WhyEfxPro overlay
       ---------------------------------------- */
    --text-display-weight: 400;
    --text-display-size: 100px;
    --text-display-line-height: 130%;

    /* Responsive Display Sizes */
    --text-display-size-tablet: 72px;
    --text-display-size-mobile-lg: 56px;
    --text-display-size-mobile: 40px;
    --text-display-size-mobile-sm: 28px;

    /* ----------------------------------------
       Heading XL - Large Section Titles
       Used for: TrendingMarkets, Hero sections
       ---------------------------------------- */
    --text-heading-xl-weight: 500;
    --text-heading-xl-size: 64px;
    --text-heading-xl-line-height: 130%;

    /* Responsive Heading XL Sizes */
    --text-heading-xl-size-tablet: 48px;
    --text-heading-xl-size-mobile-lg: 38px;
    --text-heading-xl-size-mobile: 32px;

    /* ----------------------------------------
       Heading LG - Primary Section Titles
       Used for: AccountTypes, MarketOpportunities, HeroSection h1
       ---------------------------------------- */
    --text-heading-lg-weight: 500;
    --text-heading-lg-size: 56px;
    --text-heading-lg-line-height: 130%;

    /* Responsive Heading LG Sizes */
    --text-heading-lg-size-desktop: 52px;
    --text-heading-lg-size-tablet-lg: 48px;
    --text-heading-lg-size-tablet: 42px;
    --text-heading-lg-size-mobile-lg: 38px;
    --text-heading-lg-size-mobile: 32px;

    /* ----------------------------------------
       Heading MD - Medium Section Titles
       Used for: KeyFeatures, Information, FAQ title
       ---------------------------------------- */
    --text-heading-md-weight: 500;
    --text-heading-md-size: 48px;
    --text-heading-md-line-height: 130%;

    /* Responsive Heading MD Sizes */
    --text-heading-md-size-tablet: 38px;
    --text-heading-md-size-mobile-lg: 32px;
    --text-heading-md-size-mobile: 28px;

    /* ----------------------------------------
       Heading SM - Small Titles & Card Headers
       Used for: Features title, HowItWorks timeline h3
       ---------------------------------------- */
    --text-heading-sm-weight: 500;
    --text-heading-sm-size: 32px;
    --text-heading-sm-line-height: 130%;

    /* Responsive Heading SM Sizes */
    --text-heading-sm-size-tablet: 28px;
    --text-heading-sm-size-mobile-lg: 24px;
    --text-heading-sm-size-mobile: 22px;

    /* ----------------------------------------
       Heading XS - Card Titles
       Used for: Market card titles, FAQ accordion button
       ---------------------------------------- */
    --text-heading-xs-weight: 500;
    --text-heading-xs-size: 24px;
    --text-heading-xs-line-height: 130%;

    /* Responsive Heading XS Sizes */
    --text-heading-xs-size-mobile: 20px;

    /* ----------------------------------------
       Title - Component Titles
       Used for: KeyFeatureCard title, various card titles
       ---------------------------------------- */
    --text-title-weight: 600;
    --text-title-size: 18px;
    --text-title-line-height: 130%;

    /* ----------------------------------------
       Body LG - Large Body Text
       Used for: Section descriptions, hero subtexts
       ---------------------------------------- */
    --text-lg-weight: 400;
    --text-lg-size: 18px;
    --text-lg-line-height: 100%;

    /* Responsive Body LG Sizes */
    --text-lg-size-mobile: 16px;
    --text-lg-size-mobile-sm: 14px;

    /* ----------------------------------------
       Body - Standard Body Text
       Used for: Feature items, card text, timeline paragraphs
       ---------------------------------------- */
    --text-body-weight: 400;
    --text-body-size: 16px;
    --text-body-line-height: 130%;

    /* Responsive Body Sizes */
    --text-body-size-mobile: 14px;

    /* ----------------------------------------
       Body SM - Small Body Text
       Used for: Subtitles, feature subtitles, nav links
       ---------------------------------------- */
    --text-sm-weight: 400;
    --text-sm-size: 14px;
    --text-sm-line-height: 130%;

    /* ----------------------------------------
       Pill/Button Text
       Used for: Account pills, buttons
       ---------------------------------------- */
    --text-pill-weight: 500;
    --text-pill-size: 16px;
    --text-pill-line-height: 100%;

    /* ----------------------------------------
       Button Text
       Used for: CTA buttons
       ---------------------------------------- */
    --text-button-weight: 500;
    --text-button-size: 18px;
    --text-button-line-height: 130%;

    /* Layout */
    /* --sidebar-width: 250px;
    --topbar-height: 3.5rem;
    --border-radius: 0.375rem; */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}