/* colors.css — sem360 Design System Variables */
:root {
    /* Primary */
    --color-primary: #6C5CE7;
    --color-primary-light: #A29BFE;
    --color-primary-dark: #5A4BD1;

    /* Secondary */
    --color-secondary: #00CEC9;

    /* Background */
    --color-bg: #F8F9FA;
    --color-bg-card: #FFFFFF;
    --color-bg-dark: #2D3436;

    /* Text */
    --color-text: #2D3436;
    --color-text-light: #636E72;
    --color-text-muted: #B2BEC3;

    /* Status */
    --color-success: #00B894;
    --color-warning: #FDCB6E;
    --color-error: #E17055;
    --color-info: #74B9FF;

    /* Borders & Shadows */
    --color-border: #DFE6E9;
    --border-radius: 12px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Typography */
    --font-main: 'Heebo', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
}