:root {
    color-scheme: light;

    --ec-color-background: #f8fafc;
    --ec-color-surface: #ffffff;
    --ec-color-neutral-soft: #f5f5f7;
    --ec-color-ink: #101828;
    --ec-color-primary: #223b7f;
    --ec-color-primary-hover: #1a2f68;
    --ec-color-primary-deep: #112552;
    --ec-color-primary-bright: #3159b7;
    --ec-color-primary-soft: #e8edfa;
    --ec-color-accent: #3b82f6;
    --ec-color-city-green: #4f812c;
    --ec-color-city-green-soft: #eef6e9;
    --ec-color-city-yellow: #f4c515;
    --ec-color-city-yellow-soft: #fff8d9;
    --ec-color-text: #101828;
    --ec-color-text-muted: #667085;
    --ec-color-border: #e4e7ec;
    --ec-color-success: #12b76a;
    --ec-color-success-soft: #e9f9f1;
    --ec-color-success-text: #087443;
    --ec-color-warning: #f79009;
    --ec-color-warning-soft: #fff4e5;
    --ec-color-warning-text: #8a4b00;
    --ec-color-danger: #f04438;
    --ec-color-danger-soft: #fff0ef;
    --ec-color-danger-text: #b42318;

    --ec-radius-sm: 0.75rem;
    --ec-radius-md: 1rem;
    --ec-radius-lg: 1.5rem;
    --ec-shadow-sm: 0 0.25rem 1rem rgba(16, 24, 40, 0.06);
    --ec-shadow-md: 0 0.75rem 2rem rgba(34, 59, 127, 0.12);
    --ec-shadow-lg: 0 1.5rem 4rem rgba(12, 29, 70, 0.2);
    --ec-focus-ring: 0 0 0 0.25rem rgba(59, 130, 246, 0.3);
    --ec-transition: 180ms ease;
}