@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');

:root {
    /* Primary Colors */
    --primary-color: #4ade80; /* Light green */
    --primary-dark: #22c55e; /* Darker shade of light green */
    --primary-light: #86efac; /* Lighter shade of light green */
    
    /* Secondary Colors */
    --secondary-color: #2ec4b6;
    --secondary-dark: #259d92;
    --secondary-light: #3aeeda;
    
    /* Neutral Colors */
    --background-color: #f8f9fa;
    --card-background: #ffffff;
    --text-primary: #333333;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    
    /* Feedback Colors */
    --success-color: #38b000;
    --warning-color: #ffb700;
    --error-color: #ef476f;
    
    /* Border and Shadow */
    --border-color: #dee2e6;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --font-family: "Sen", sans-serif;
    --font-size-small: 0.875rem;
    --font-size-normal: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Animation */
    --transition-speed: 0.3s;
}

/* Dark theme (could be toggled with JS) */
.dark-theme {
    --background-color: #121212;
    --card-background: #1e1e1e;
    --text-primary: #f8f9fa;
    --text-secondary: #e9ecef;
    --text-muted: #adb5bd;
    --border-color: #2d2d2d;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --box-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.3);
}