:root {
    /* Colors */
    --color-background: #0A0A0A;
    --color-primary: #E293D3;
    --color-secondary: #B185DB;
    --color-text: #FFFFFF;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    
    /* Typography - Base Font Sizes */
    --font-size-base: 1rem;         /* 16px */
    --font-size-sm: 0.875rem;       /* 14px */
    --font-size-md: 1.125rem;       /* 18px */
    --font-size-lg: 1.5rem;         /* 24px */
    --font-size-xl: 2rem;           /* 32px */
    --font-size-2xl: 2.5rem;        /* 40px */
    --font-size-3xl: 3rem;          /* 48px */
    --font-size-4xl: 3.5rem;        /* 56px */
    --font-size-5xl: 4rem;          /* 64px */
    
    /* Heading Sizes - Desktop (>= 1200px) */
    --h1-font-size: 4.0625rem;      /* 65px */
    --h2-font-size: 2.875rem;       /* 46px */
    --h3-font-size: 1.125rem;       /* 18px */
    --h4-font-size: 3rem;           /* 48px */
    --h5-font-size: 1.125rem;       /* 18px */
    
    /* Heading Sizes - Tablet (768px - 1199px) */
    --h1-font-size-tablet: 3rem; /* 52px */
    --h2-font-size-tablet: 2.625rem; /* 42px */
    --h3-font-size-tablet: 1.125rem; /* 18px - unchanged */
    --h4-font-size-tablet: 2.5rem;  /* 40px */
    --h5-font-size-tablet: 1.125rem; /* 18px - unchanged */
    
    /* Heading Sizes - Mobile (< 768px) */
    --h1-font-size-mobile: 2.25rem; /* 44px */
    --h2-font-size-mobile: 2rem; /* 36px */
    --h3-font-size-mobile: 1rem;    /* 16px */
    --h4-font-size-mobile: 2rem; /* 36px */
    --h5-font-size-mobile: 1rem;    /* 16px */
    
    /* Special Typography Classes */
    --section-title-font-size: var(--h2-font-size);
    --section-title-font-size-tablet: var(--h2-font-size-tablet);
    --section-title-font-size-mobile: var(--h2-font-size-mobile);
    
    --subtitle-font-size: var(--h4-font-size);
    --subtitle-font-size-tablet: var(--h4-font-size-tablet);
    --subtitle-font-size-mobile: var(--h4-font-size-mobile);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, rgba(226, 147, 211, 0.2), rgba(177, 133, 219, 0.2));
    --gradient-card: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --gradient-overlay: linear-gradient(180deg, rgba(226, 147, 211, 0.1) 0%, rgba(177, 133, 219, 0.1) 100%);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2.5rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* Border Radius */
    --border-radius-sm: 0.75rem;    /* 12px */
    --border-radius-md: 1.25rem;     /* 20px */
    --border-radius-lg: 1.75rem;     /* 28px */
    
    /* Container */
    --container-width: 1200px;
    --container-padding: 1.25rem; /* 20px */
}