/* The look of every modal and toast — colours, sizes, radius, backdrop. Change it here and every page follows.
   Values come from tokens.css; buttons (.ui-btn …) live in kit.css. */
:root {
    --ui-modal-w-sm: 440px;
    --ui-modal-w-md: 680px;
    --ui-modal-w-lg: 920px;
    --ui-modal-w-xl: 1160px;
    --ui-modal-radius: var(--r-xl, 16px);
    --ui-modal-bg: var(--c-surface, var(--gray-0));
    --ui-modal-border: var(--c-border, var(--gray-200));
    --ui-modal-shadow: var(--e-5, 0 24px 48px -12px rgba(16, 24, 40, .22));
    --ui-back: rgba(16, 24, 40, .45);
    --ui-line: var(--c-border, var(--gray-200));
    --ui-head: var(--c-surface, var(--gray-0));
    --ui-text: var(--c-text, var(--gray-900));
    --ui-muted: var(--c-text-3, var(--gray-500));
    --ui-primary: var(--c-primary, var(--brand-700));
    --ui-success: var(--success-700, var(--success-700));
    --ui-danger: var(--danger-700, var(--danger-700));
    --ui-warning: var(--warning-700, var(--warning-700));
    --ui-info: var(--info-700, var(--info-700));
    --ui-toast-accent: var(--ui-primary);
}