/*
   The app's palette and type, in one place.

   Taken from the "Healthcare" palette in docs/colour-palette.png, drawn light:

     Rich Azure   #184E77  primary - the sidebar, primary buttons, headings
     Soft Teal    #34A0A4  secondary - links, accents, active states
     Light Jade   #76C893  success and positive feedback
     Icy Green    #F1FAF1  page and panel backgrounds
     Icy Rose     #FFE5EC  soft attention backgrounds

   Only Rich Azure's value was given exactly; the others are read from the swatches. Soft Teal fails
   WCAG AA as text: 2.9:1 as a link on Icy Green and 3.1:1 under white text. So wherever teal carries
   text - links, the active menu item, teal buttons - it is darkened to #1E7A7E, the same hue, which
   gives 4.8:1 on Icy Green and 5.1:1 under white. The swatch itself is kept for focus rings, accents
   and borders, where it carries no text. Light Jade is a background under dark text (7.7:1), never a
   text colour; positive text is #1F7A43.

   Every colour is set for light and dark. The palette is drawn light, so the app opens light
   (App:Defaults:Theme); the dark values keep the hues and move the lightness, checked to the same
   ratios.

   Three rules hold whatever the palette is:

   1. Every colour is set twice, once for light and once for dark.
   2. Body text against its background stays at or above 4.5:1, and large text and interface borders
      at or above 3:1.
   3. No font is fetched from the web. The Content-Security-Policy allows no external hosts.

   The names below are Bootstrap's own variables where Bootstrap has one, so buttons, links, tables
   and form controls follow the palette without being restyled one by one.
*/

:root,
[data-bs-theme="light"] {
    /* Brand. */
    --app-accent: #184E77;                 /* Rich Azure */
    --app-accent-contrast: #ffffff;        /* 8.8:1 */
    --app-accent-hover: #123B5A;
    --app-secondary: #1E7A7E;              /* Soft Teal, darkened for text: 4.8:1 on Icy Green */
    --app-secondary-swatch: #34A0A4;       /* Soft Teal as drawn: accents and focus, never text */
    --app-heading: #184E77;                /* 8.2:1 on Icy Green */
    --app-surface: #F1FAF1;                /* Icy Green: the page */
    --app-surface-sunken: #ffffff;         /* panels and cards on it */
    --app-text: #12263A;                   /* 14.4:1 on Icy Green */
    --app-text-muted: #4A5A68;             /* 6.7:1 on Icy Green, 6.0:1 on Icy Rose */
    --app-border: #7A958A;                 /* form controls: 3.0:1 on Icy Green, 3.2:1 on white */
    --app-border-soft: #CFE3D6;            /* card outlines, decorative */

    /* Clinical signals. Distinct from the brand: they mean something. */
    --app-critical: #B02A37;               /* 6.1:1 */
    --app-warning: #9A4F00;                /* 5.6:1 */
    --app-positive: #1F7A43;               /* 5.0:1 */
    --app-info: #1E7A7E;
    --app-attention-bg: #FFE5EC;           /* Icy Rose */
    --app-attention-border: #E9A9BA;
    --app-positive-bg: #76C893;            /* Light Jade, under dark text: 7.7:1 */
    --app-positive-soft: #DDF2E3;
    --app-highlight-bg: #CDEFD8;           /* a cited passage in its source */

    /* Charts. Azure and a darker teal, apart in lightness as well as hue so they stay apart for a
       colour-blind reader, and both at least 3:1 against the page. */
    --app-chart-1: #184E77;
    --app-chart-2: #2A8F93;
    --app-chart-failed: #B02A37;

    --app-radius: 0.5rem;
    --app-font: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --app-font-heading: var(--app-font);

    /* The frame: an Azure sidebar, the palette's "header", with the active item in teal. */
    --app-sidebar-bg: linear-gradient(180deg, #184E77 0%, #1F6A85 100%);
    --app-sidebar-brand-bg: rgba(0, 0, 0, 0.22);
    --app-sidebar-text: #E6F2F4;           /* 5.3:1 at the gradient's lightest */
    --app-sidebar-text-active: #ffffff;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
    --app-sidebar-active-bg: #1E7A7E;      /* white on it: 5.1:1 */
    --app-topbar-bg: #ffffff;
    --app-partner-logo-bg: #184E77;        /* Mediphany's logo is light blue and white: it needs the
                                              Azure under it on a light top bar, 3.3:1 and 8.8:1 */

    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 24, 78, 119;
    --bs-link-color: var(--app-secondary);
    --bs-link-color-rgb: 30, 122, 126;
    --bs-link-hover-color: var(--app-accent);
    --bs-link-hover-color-rgb: 24, 78, 119;
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-border-color: var(--app-border);
    --bs-border-radius: var(--app-radius);
    --bs-body-font-family: var(--app-font);
    --bs-focus-ring-color: rgba(52, 160, 164, 0.45);
    --bs-success: #1F7A43;
    --bs-success-rgb: 31, 122, 67;
    --bs-success-bg-subtle: var(--app-positive-soft);
    --bs-success-border-subtle: var(--app-positive-bg);
    --bs-success-text-emphasis: #0B3D22;
    --bs-warning-bg-subtle: var(--app-attention-bg);
    --bs-warning-border-subtle: var(--app-attention-border);
    --bs-warning-text-emphasis: var(--app-text);
    --bs-info-bg-subtle: #E1F3F3;
    --bs-info-border-subtle: #9FD3D5;
    --bs-info-text-emphasis: var(--app-text);
}

[data-bs-theme="dark"] {
    --app-accent: #7FB6E0;                 /* Rich Azure, lightened: dark text on it 8.1:1 */
    --app-accent-contrast: #0F1A22;
    --app-accent-hover: #9CC7EA;
    --app-secondary: #5CC3C7;              /* Soft Teal, lightened: 7.5:1 on panels */
    --app-secondary-swatch: #34A0A4;
    --app-heading: #9CC7EA;
    --app-surface: #0F1A22;
    --app-surface-sunken: #17252F;
    --app-text: #E3EEF0;                   /* 14.9:1 */
    --app-text-muted: #A9BAC4;             /* 7.8:1 on panels */
    --app-border: #6A8796;
    --app-border-soft: #2B3F4B;

    --app-critical: #ff8087;
    --app-warning: #f0a35e;
    --app-positive: #8ED9A8;
    --app-info: #5CC3C7;
    --app-attention-bg: #3A2630;           /* Icy Rose, darkened: light text on it 10.5:1 */
    --app-attention-border: #6B3F4D;
    --app-positive-bg: #8ED9A8;
    --app-positive-soft: #1E3B2A;
    --app-highlight-bg: #2F5A3E;

    /* Darker than the text colours above: a filled bar that bright glares on a dark surface. */
    --app-chart-1: #3D8FCC;
    --app-chart-2: #3FB0B4;
    --app-chart-failed: #e66767;

    --app-sidebar-bg: linear-gradient(180deg, #0E2F48 0%, #123E5C 100%);
    --app-sidebar-brand-bg: rgba(0, 0, 0, 0.3);
    --app-sidebar-text: #E3EEF0;           /* 9.5:1 */
    --app-sidebar-text-active: #ffffff;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --app-sidebar-active-bg: #1B6F73;
    --app-topbar-bg: var(--app-surface-sunken);
    --app-partner-logo-bg: #0E2F48;        /* the dark sidebar's Azure: 5.2:1 and 13:1 */

    --bs-primary-rgb: 127, 182, 224;
    --bs-link-color-rgb: 92, 195, 199;
    --bs-link-hover-color-rgb: 156, 199, 234;
    --bs-success: #8ED9A8;
    --bs-success-rgb: 142, 217, 168;
    --bs-success-text-emphasis: #DDF2E3;
    --bs-warning-text-emphasis: #F3D9E0;
    --bs-info-bg-subtle: #123A3C;
    --bs-info-border-subtle: #2A6B6E;
    --bs-info-text-emphasis: var(--app-text);
}

body {
    background-color: var(--app-surface);
    color: var(--app-text);
    font-family: var(--app-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-heading);
    color: var(--app-heading);
}

.card {
    background-color: var(--app-surface-sunken);
    border-color: var(--app-border-soft);
    border-radius: var(--app-radius);
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-color: var(--app-accent-contrast);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-active-color: var(--app-accent-contrast);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-disabled-color: var(--app-accent-contrast);
    --bs-btn-focus-shadow-rgb: 52, 160, 164;
}

.btn-outline-primary {
    --bs-btn-color: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-active-bg: var(--app-accent);
    --bs-btn-active-border-color: var(--app-accent);
    --bs-btn-active-color: var(--app-accent-contrast);
    --bs-btn-disabled-color: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-focus-shadow-rgb: 52, 160, 164;
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-text-muted);
    --bs-btn-border-color: var(--app-border);
    --bs-btn-hover-bg: var(--app-secondary);
    --bs-btn-hover-border-color: var(--app-secondary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--app-secondary);
    --bs-btn-active-border-color: var(--app-secondary);
    --bs-btn-active-color: #ffffff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-hover-color: var(--app-accent-contrast);
    --bs-btn-active-color: var(--app-accent-contrast);
}

.btn-link {
    --bs-btn-color: var(--app-secondary);
    --bs-btn-hover-color: var(--app-heading);
    --bs-btn-active-color: var(--app-heading);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-secondary-swatch);
    box-shadow: 0 0 0 0.25rem rgba(52, 160, 164, 0.35);
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

mark {
    background-color: var(--app-highlight-bg);
    color: var(--app-text);
    padding: 0 0.1em;
}

/* Clinical signal helpers, for the app's own content. */
.app-critical { color: var(--app-critical); }
.app-warning { color: var(--app-warning); }
.app-positive { color: var(--app-positive); }
.app-info { color: var(--app-info); }