:root {
    color-scheme: light;

    --font-family-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --color-primary: #822977;
    --color-primary-hover: #702166;
    --color-primary-active: #5b1953;
    --color-primary-light: #f2e7f1;
    --color-primary-dark: #46133f;

    --color-success: #168b61;
    --color-warning: #b87400;
    --color-error: #c43d3d;
    --color-info: #2b77e7;

    --color-background: #f5f7fb;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-border: #dbe1ee;

    --color-text-primary: #162033;
    --color-text-secondary: #516074;
    --color-text-muted: #6b778c;
    --color-disabled: #9aa5b6;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 26px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.11);
    --shadow-xl: 0 28px 70px rgba(15, 23, 42, 0.14);

    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 320ms ease;

    --container-width: 1180px;
}