:root {
    --m-color-primary: #533dea;
    --m-color-primary-strong: #4230c7;
    --m-color-success: #44b461;
    --m-color-danger: #ea3434;
    --m-color-warning: #f2c71c;
    --m-color-info: #0584ff;

    --m-color-text: #1e1e1e;
    --m-color-text-secondary: #4b5563;
    --m-color-text-muted: #6b7280;

    --m-color-surface: #f5f5f5;
    --m-color-card: #ffffff;
    --m-color-border: #e5e7eb;
    --m-color-border-soft: #f3f4f6;

    --m-radius-sm: 0.5rem;
    --m-radius: 0.75rem;
    --m-radius-lg: 1rem;
    --m-radius-pill: 999rem;

    --m-shadow-sm: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06);
    --m-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    --m-shadow-lg: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    --m-shadow-top: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.1);

    --m-space-1: 0.25rem;
    --m-space-2: 0.5rem;
    --m-space-3: 0.75rem;
    --m-space-4: 1rem;
    --m-space-5: 1.25rem;
    --m-space-6: 1.5rem;
    --m-space-8: 2rem;

    --m-font-xs: 0.75rem;
    --m-font-sm: 0.8125rem;
    --m-font-base: 0.875rem;
    --m-font-md: 0.9375rem;
    --m-font-lg: 1rem;
    --m-font-xl: 1.125rem;
    --m-font-2xl: 1.25rem;

    --m-touch-min: 3rem;
    --m-touch-compact: 2.75rem;

    --m-bottom-nav-height: 5.625rem;
    --m-safe-area-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 30rem) {
    :root {
        --m-font-base: 0.9375rem;
        --m-font-md: 1rem;
        --m-font-lg: 1.0625rem;
        --m-font-xl: 1.1875rem;
    }
}