/* Colour roles the MudBlazor palette has no slot for, per theme, and the sizes the frame is built from.
   Where a role exists in both, MudBlazor's variable is the one to use (Themes/AppTheme.cs); --ms-bg repeats
   the palette's background so the page has its colour before MudBlazor has written its variables.
   data-theme on <html> is set by js/theme.js before the first paint. */

:root {
    --ms-font-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --ms-font-data: "Roboto", "Segoe UI", system-ui, sans-serif;

    --ms-bar-h: 56px;
    /* The system messages under the bar, measured by js/shell.js; the frame's content starts below both. */
    --ms-notices-h: 0px;
    --ms-top-h: calc(var(--ms-bar-h) + var(--ms-notices-h));
    --ms-rail-w: 236px;
    --ms-rail-w-collapsed: 64px;
    --ms-page-max: 1800px;
    --ms-radius: 10px;
    --ms-radius-sm: 6px;

    --ms-bg: #F6F8FB;
    --ms-surface-2: #F3F6F9;
    --ms-line-strong: #C5D0DB;
    --ms-ink-3: #7489A0;
    --ms-warning-accent: #E49B0F;
    --ms-focus: 0 0 0 3px rgba(10, 105, 160, .28);
    --ms-shadow-pop: 0 12px 32px rgba(16, 36, 58, .14), 0 2px 6px rgba(16, 36, 58, .08);

    /* The frame: steel blue, a step darker than the workspace, with dark text. */
    --ms-shell: #CCD9E6;
    --ms-shell-ink: #0F2235;
    --ms-shell-strong: #0B1A29;
    --ms-shell-muted: #33475B;
    --ms-shell-faint: #4F6479;
    --ms-shell-line: #B4C4D5;
    --ms-shell-line-strong: #9EB1C5;
    --ms-shell-accent: #0A5F91;
    --ms-shell-hover: #BECDDD;
    --ms-shell-active: #FFFFFF;
    --ms-shell-ctx: #DCE5EF;
    --ms-shell-grid: rgba(11, 26, 41, .07);
    --ms-shell-glow: rgba(0, 119, 176, .10);
    --ms-shell-avatar: #FFFFFF;
    --ms-shell-divider: #9EB1C5;
    --ms-shell-tag: #FFFFFF;
    --ms-shell-tip: #0B1A29;
    --ms-shell-tip-ink: #FFFFFF;

    /* The ownership diagram: a company, the one you are on, one whose source is deleted, and the parent line
       (the line itself is drawn from StructureDiagram's ParentEdgeColor, an SVG attribute). */
    --ms-structure-node: #4F74A8;
    --ms-structure-node-here: #7D0DC3;
    --ms-structure-node-gone: #7A8796;
    --ms-structure-parent: #FFA500;
    --ms-structure-node-ink: #FFFFFF;

    /* The report editor's formula references, one colour per L-reference in turn, and how much of it the
       referenced row is tinted with. */
    --ms-formula-ref-1: #1F6FD1;
    --ms-formula-ref-2: #D0362F;
    --ms-formula-ref-3: #7B3FC4;
    --ms-formula-ref-4: #1E8A4C;
    --ms-formula-ref-5: #C46A00;
    --ms-formula-ref-6: #0E8A8F;
    --ms-formula-ref-7: #C2378A;
    --ms-formula-ref-8: #6B7A12;
    --ms-formula-ref-tint: 14%;

    /* Chart series, in this order and never cycled: the order is what keeps neighbours apart for colour-blind
       readers, checked against the surface of each theme. 3 and 4 are under 3:1 on light, so a chart using them
       comes with its figures as a table. */
    --ms-chart-1: #2A78D6;
    --ms-chart-2: #EB6834;
    --ms-chart-3: #1BAF7A;
    --ms-chart-4: #EDA100;

    /* Behind a QR code in both themes: a scanner reads dark modules on a light ground. */
    --ms-qr-ground: #FFFFFF;

    /* Text on Blazor's reconnect dialog, which is white in both themes. */
    --ms-reconnect-ink: #10243A;

    color-scheme: light;
}

:root[data-theme="dark"] {
    --ms-bg: #0E1C2A;
    --ms-surface-2: #112233;
    --ms-line-strong: #2E4862;
    --ms-ink-3: #7590A8;
    --ms-warning-accent: #EBAA4F;
    --ms-focus: 0 0 0 3px rgba(143, 192, 234, .35);
    --ms-shadow-pop: 0 16px 40px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);

    /* The frame: the landing page's navy. */
    --ms-shell: #0B1A29;
    --ms-shell-ink: #EDF3F9;
    --ms-shell-strong: #FFFFFF;
    --ms-shell-muted: #93ADC4;
    --ms-shell-faint: #6F89A1;
    --ms-shell-line: rgba(201, 220, 238, .12);
    --ms-shell-line-strong: rgba(201, 220, 238, .22);
    --ms-shell-accent: #8FC0EA;
    --ms-shell-hover: rgba(201, 220, 238, .08);
    --ms-shell-active: rgba(143, 192, 234, .13);
    --ms-shell-ctx: rgba(201, 220, 238, .05);
    --ms-shell-grid: rgba(201, 220, 238, .06);
    --ms-shell-glow: rgba(0, 119, 176, .18);
    --ms-shell-avatar: #1B3A57;
    --ms-shell-divider: rgba(201, 220, 238, .28);
    --ms-shell-tag: rgba(143, 192, 234, .14);
    --ms-shell-tip: #E4EDF5;
    --ms-shell-tip-ink: #0B1A29;

    --ms-structure-node: #7FA4D6;
    --ms-structure-node-here: #B98AF0;
    --ms-structure-node-gone: #8A97A6;
    --ms-structure-parent: #FFA500;
    --ms-structure-node-ink: #0B1A29;

    --ms-formula-ref-1: #6AA8F5;
    --ms-formula-ref-2: #F27D73;
    --ms-formula-ref-3: #B48BF0;
    --ms-formula-ref-4: #5CCB8A;
    --ms-formula-ref-5: #F0A54A;
    --ms-formula-ref-6: #4FC7CB;
    --ms-formula-ref-7: #EE7CC0;
    --ms-formula-ref-8: #B5C557;
    --ms-formula-ref-tint: 22%;

    --ms-chart-1: #3987E5;
    --ms-chart-2: #D95926;
    --ms-chart-3: #199E70;
    --ms-chart-4: #C98500;

    color-scheme: dark;
}

/* From our token rather than MudBlazor's palette: the circuit's first render is in the light palette until it
   has read the theme from the browser, and on a slow connection that frame would flash a light page. */
html,
html body {
    background-color: var(--ms-bg);
}