/* Shared visual vocabulary. Semantic colour names are understood by appearance.js. */
:root {
    --ui-ink: #302a43;
    --ui-muted: #655d75;
    --ui-surface: #ffffff;
    --ui-soft: #f7f5fb;
    --ui-background: #f5f4f9;
    --ui-line: #e4dfed;
    --ui-accent: #654cc5;
    --ui-accent-ink: #654cc5;
    --ui-accent-hover: #5139ae;
    --ui-accent-soft: #eee9fb;
    --ui-success-ink: #226d4c;
    --ui-success-soft: #edf8f1;
    --ui-warning-ink: #865713;
    --ui-warning-soft: #fff5df;
    --ui-danger-ink: #b12e46;
    --ui-danger-soft: #fff0f3;
    --ui-info-ink: #315e9d;
    --ui-info-soft: #edf3fc;
    --ui-panel-radius: 18px;
    --ui-panel-shadow: 0 4px 22px #34234707, 0 1px 3px #34234704;
}