/* Shared by the web workspace, consoles, public site and Outlook panes. */
:root {
    --bg-void:      #F5F7FB;
    --bg-base:      #ffffff;
    --bg-raised:    #f6f8fa;
    --bg-float:     #eef2f6;
    --bg-hover:     #F1F6FF;
    --bg-active:    #d9e5f0;

    --border:       #E2E8F0;
    --border-mid:   #c0cfe0;
    --border-hi:    #a8bfd0;

    --text-dim:     #596980;
    --text-mute:    #52637A;
    --text-soft:    #5a6d84;
    --text-body:    #3d4f68;
    --text-hi:      #1e3a5f;
    --text-white:   #10264B;

    --accent:       #1D4ED8;
    --brand-navy:   #10264B;
    --brand-sky:    #3B82F6;
    --accent-dim:   #1E40AF;
    --accent-glow:  rgba(43, 127, 255, 0.15);
    --accent-hi:    #1E40AF;

    --green:        #22c55e;
    --green-dim:    #15803d;
    --red:          #f43f5e;
    --red-dim:      #9f1239;
    --amber:        #f59e0b;
    --amber-dim:    #92400e;

    --font-display: 'Manrope', 'Segoe UI', sans-serif;
    --font-mono:    'DM Mono', monospace;

    --radius-sm:    6px;
    --radius:       8px;
    --radius-lg:    12px;

    --shadow-sm:    0 1px 3px rgba(16,38,75,.06);
    --shadow:       0 4px 16px rgba(16,38,75,.08);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.15);

    /* Status: a state the reader has to notice, on a tinted chip rather
       than coloured text, so it reads at a glance in a long table. */
    --ok:           #12805c;
    --ok-bg:        #e6f6ef;
    --bad:          #b42318;
    --bad-bg:       #fdecea;
    /* Needs a human, but nothing is broken. */
    --warn:         #96620a;
    --warn-bg:      #fdf3e2;

    --control-height: 40px;
    --space-unit: 4px;
    --on-navy-muted: #BFD2EF;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}