:root {
    /* Colors from Figma */
    --color-pink: #F68CEC;
    --color-dark: #231F20;
    --color-light: #F5F5F5;

    /* Backgrounds - LIGHT theme */
    --bg-primary: #F5F5F5;
    --bg-secondary: #EBEBEB;
    --bg-card: #FFFFFF;
    --bg-card-hover: #f0f0f0;
    --bg-dark: #231F20;

    /* Text */
    --text-primary: #231F20;
    --text-secondary: #231F20;
    --text-muted: #888888;
    --text-light: #F5F5F5;

    /* Accents */
    --accent-pink: #F68CEC;
    --accent-gradient: linear-gradient(135deg, #F68CEC, #f5b8ef);

    --border-color: #e0e0e0;

    /* Fonts */
    --font-heading: 'Polin', 'Neco', sans-serif;
    --font-body: 'Polin', 'Neco', sans-serif;

    /* Font Sizes */
    --font-size-hero: 7vw;
    --font-size-h1: 3vw;
    --font-size-h2: 2.2vw;
    --font-size-h3: 1.6vw;
    --font-size-body: 1.1vw;
    --font-size-small: 0.9vw;
    --font-size-nav: 0.9vw;

    /* Spacing */
    --spacing-xs: 0.5vw;
    --spacing-sm: 1vw;
    --spacing-md: 2vw;
    --spacing-lg: 4vw;
    --spacing-xl: 6vw;
    --section-padding: 8vh 4vw;
    --container-width: 90%;
    --navbar-height: 8vh;

    /* Borders */
    --border-radius-sm: 0.4vw;
    --border-radius-md: 0.8vw;
    --border-radius-lg: 1.2vw;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}