:root {
    --primary: #5b69ec;
    --secondary: #9b61e7;
    --accent: #22b8b2;

    --text: #18213a;
    --text-soft: #626d86;
    --text-muted: #7b86a0;

    --background: #f8f9fd;
    --surface: #ffffff;
    --surface-soft: #f4f6fb;

    --border: #e2e5ef;
    --border-strong: #d9deeb;

    --shadow-soft:
        0 10px 30px rgba(50, 65, 106, 0.07);

    --shadow-medium:
        0 18px 45px rgba(50, 65, 106, 0.11);

    --shadow-large:
        0 30px 80px rgba(54, 69, 118, 0.12);

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 24px;
    --radius-extra-large: 30px;
    --radius-pill: 999px;

    --container-width: 1280px;
    --container-padding: 24px;

    --transition-fast: 170ms ease;
    --transition-normal: 180ms ease;
    --transition-slow: 250ms ease;
}

@media (max-width: 800px) {
    :root {
        --container-padding: 18px;
    }
}

@media (max-width: 560px) {
    :root {
        --container-padding: 14px;
    }
}