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

   This file is meant to be rewritten for each app from what its specification asks for: a style
   guide, a set of mockups, a brand page, or colours named in the description. Everything else
   styles itself from these variables, the sidebar and the top bar included, so changing them here
   restyles the whole app and nothing has to hunt through components for a colour.

   Three rules hold whatever the palette is:

   1. Every colour is set twice, once for light and once for dark. The app opens in whichever mode
      App:Defaults:Theme in appsettings.json names, and anybody can switch, so a palette lifted from
      a light mockup and pasted in once leaves dark mode unreadable.
   2. Body text against its background stays at or above 4.5:1, and large text and interface borders
      at or above 3:1. A clinician reads this at arm's length on a ward monitor, and a brand grey on
      white that fails contrast is a specification that has to be argued with, not followed.
   3. No font is fetched from the web. The Content-Security-Policy allows no external hosts, so name
      the fonts the specification asks for and let the stack fall back to what the machine has, or
      add a font file under wwwroot and @font-face it here.

   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. The accent is what the eye goes to first: primary buttons, links, the active nav item. */
    --app-accent: #0d6efd;
    --app-accent-contrast: #ffffff;
    --app-surface: #ffffff;
    --app-surface-sunken: #f8f9fa;
    --app-text: #212529;
    --app-text-muted: #5c636a;
    --app-border: #dee2e6;

    /* Clinical signals. Keep these distinguishable from the brand colours: they mean something. */
    --app-critical: #b02a37;
    --app-warning: #d97706;
    --app-positive: #1a7f37;
    --app-info: #0a58ca;

    /* Charts, in this order. Each pair was checked to stay apart for colour-blind readers and to
       stand off the surface; a series is never told by colour alone, so the legend and the table
       under every chart still name it. A new palette's chart colours need the same check, in both
       modes, rather than being taken from the brand as they are. */
    --app-chart-1: #2a78d6;
    --app-chart-2: #eb6834;
    --app-chart-failed: #b02a37;

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

    /* The frame around every page: the sidebar and the bar across the top of the content. Take
       them from the specification's own navigation - a style guide's nav bar, a mockup's menu -
       or from its brand colours, or the app keeps the template's navy-to-plum sidebar whatever the
       rest of the palette says. The sidebar's background may be a gradient. Its icons are drawn in
       its text colour, so a light sidebar needs a dark --app-sidebar-text, not new icons. */
    --app-sidebar-bg: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --app-sidebar-brand-bg: rgba(0, 0, 0, 0.4);
    --app-sidebar-text: #d7d7d7;
    --app-sidebar-text-active: #ffffff;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --app-sidebar-active-bg: rgba(255, 255, 255, 0.37);
    --app-topbar-bg: var(--app-surface-sunken);

    --bs-primary: var(--app-accent);
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: var(--app-accent);
    --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);
}

[data-bs-theme="dark"] {
    --app-accent: #6ea8fe;
    --app-accent-contrast: #05192f;
    --app-surface: #16191d;
    --app-surface-sunken: #1f2328;
    --app-text: #e9ecef;
    --app-text-muted: #adb5bd;
    --app-border: #343a40;

    --app-critical: #ff8087;
    --app-warning: #f0a35e;
    --app-positive: #75d18a;
    --app-info: #8ec1ff;

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

    --app-sidebar-bg: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --app-sidebar-brand-bg: rgba(0, 0, 0, 0.4);
    --app-sidebar-text: #d7d7d7;
    --app-sidebar-text-active: #ffffff;
    --app-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --app-sidebar-active-bg: rgba(255, 255, 255, 0.37);
    --app-topbar-bg: var(--app-surface-sunken);
}

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);
}

.card {
    background-color: var(--app-surface-sunken);
    border-color: var(--app-border);
    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);
    --bs-btn-hover-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-accent-contrast);
}

/* 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); }