:root {
    /* Background */
    --color-bg: #F8F6FC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1EDF8;
    /* Text */
    --color-text: #1E1B2E;
    --color-text-light: #5F5A72;
    --color-text-muted: #8B849D;
    /* Primary Purple */
    --color-primary: #7C4DFF;
    --color-primary-hover: #6B3DF0;
    --color-primary-light: #EEE8FF;
    /* Border */
    --color-border: #DDD6F3;
    /* States */
    --color-success: #2E9B62;
    --color-warning: #E9A23B;
    --color-danger: #D9534F;
    /* Neutral button */
    --color-neutral: #E9E4F4;
    --color-neutral-hover: #DDD6EC;
    --color-neutral-text: #433B59;
    /* Shadow */
    --shadow-soft: 0 4px 18px rgba(124, 77, 255, 0.08);
    --shadow-soft-color: rgba(124, 77, 255, 0.08);
    /* Login */
    --login-color-bg: #1A1625;
    --login-color-surface: #241E33;
    --login-color-surface-alt: #2F2742;
    --login-color-text: #FFFFFF;
    --login-color-text-light: #D2CCE6;
    --login-color-text-muted: #A59CBF;
    --login-color-border: #43385F;
    --login-color-primary: #9B7CFF;
    --login-color-primary-hover: #8A68FA;
    --login-color-primary-light: rgba(155, 124, 255, 0.12);
    --login-shadow-soft: 0 8px 30px rgba(0,0,0,.35);
}

html, body, #app {
    margin: 0;
    min-height: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}