:root {
    /* Color Variables - Light Mode to match landing page */
    --primary-color: #9d8cff;       /* Primary purple */
    --primary-light: #b4a7ff;       /* Light purple */
    --primary-dark: #764ba2;        /* Dark purple */
    --secondary-color: #ff9f30;     /* Orange */
    --secondary-light: #ffb74d;     /* Light orange */
    --secondary-lighter: #ffe0b3;   /* Very light orange */
    --success-color: #4caf50;       /* Green */
    --danger-color: #f44336;        /* Red */
    --danger-dark: #d32f2f;         /* Dark red */
    --warning-color: #ff7b7b;       /* Pink/Red */
    --star-color: #ffb74d;          /* Star gold */
    --text-color: #333333;          /* Dark text for light mode */
    --text-secondary: #666666;      /* Secondary text */
    --background-color: #667eea;    /* Gradient background start */
    --background-end: #764ba2;      /* Gradient background end */
    --card-background: #ffffff;     /* White card background */
    --disabled-color: #ccc;         /* Light disabled state */
    --chore-color: #4caf50;         /* Green for chores */
    --reward-color: #ff9f30;        /* Orange for rewards */
    --card-background-light: #f8f9fa; /* Light card background */
    
    /* Spacing Variables */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 10px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* Border Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 15px;
    --border-radius-lg: 50px;
    
    /* Shadow */
    --shadow-default: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-default: all .2s ease;
    
    /* Font Sizes */
    --font-xs: 1rem;
    --font-sm: 1.1rem;
    --font-md: 1.2rem;
    --font-lg: 1.3rem;
    --font-xl: 2rem;
    --font-xxl: 2.2rem;
    --font-xxxl: 2.5rem;
}

/* Mobile-specific variable overrides */
@media (max-width: 480px) {
    :root {
        --spacing-xs: 4px;
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 15px;
        --spacing-xl: 20px;
        --font-sm: .8rem;
        --font-md: .9rem;
        --font-lg: 1.1rem;
        --font-xl: 1.3rem;
        --font-xxl: 1.6rem;
    }
}