:root {
    --animation-duration: 100ms;

    --spacing-lg: 2.5rem;
    --spacing-md: 1rem;
    --spacing-sm: 0.5rem;

    --radius-sm: 4px;
    --radius-lg: 15px;

    --primary-50: #FEFDFF;
    --primary-100: #F5F1F9;
    --primary-200: #E2D9F3;
    --primary-250: #C9BEDE;
    --primary-300: #B4A7CB;
    --primary-400: #A090BD;
    --primary-500: #8874AC;
    --primary-600: #684F95;

    --neutral: #FFFFFF;
    --neutral-100: rgba(0, 0, 0, 0.15);
    --neutral-200: rgba(0, 0, 0, 0.25);
    --neutral-400: rgba(0, 0, 0, 0.50);
    --neutral-600: rgba(0, 0, 0, 0.70);
    --neutral-800: rgba(0, 0, 0, 0.85);

    --primary: #684F95;
    --primary-light: color-mix(in srgb, var(--primary), white 75%);
    --primary-hover: #8874AC;

    --secondary: #F2F2F2;

    --danger: #C200031A;
    --on-danger: #C20003;

    --border-color: rgba(0, 0, 0, 0.15);
    --border-radius: 8px;

    --status-perfect: #A6D6B2;
    --on-status-perfect: #245B32;
    --status-good: #CBE0A9;
    --on-status-good: #4C6228;
    --status-warn: #F4C8A8;
    --on-status-warn: #7B4B29;
    --status-bad: #F3B7B7;
    --on-status-bad: #823636;

    --surface-subtle: #FEFDFF;

    --text-color: black;
    --shadow-lg: 0 0 20px rgba(0, 0, 0, 0.08);

    --highlight: rgba(0, 0, 0, 0.07);
}