/*
   Chart Reviewer's palette and type, in one place.

   Taken from docs/medical-document-search-and-retrieval-tool-design.md (§7 Visual direction) and
   the hex codes in docs/medical-document-search-and-retrieval-tool-mockups.html: a calm,
   clinical-technical instrument panel, dark-first, with a near-black #0a0e1a base, an off-white
   #f1f5f9 base for daylight, cool blue and cyan for interactive elements and match highlights, and
   slate grey for secondary text and borders. Everything else styles itself from these variables,
   so changing them here restyles the whole app.

   Three rules hold whatever the palette is:

   1. Every colour is set twice, once for light and once for dark. The app defaults to 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. Where a value from the documents failed, the hue was kept and the
      lightness moved; README.md lists every one of those.
   3. No font is fetched from the web. The Content-Security-Policy allows no external hosts, so
      Inter is named and the stack falls back to whatever the machine has.

   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"] {
    /* Surfaces: the daylight theme, off-white base with white cards over it. */
    --app-surface: #f1f5f9;
    --app-surface-raised: #ffffff;
    --app-surface-sunken: #e2e8f0;

    --app-text: #1e293b;
    --app-text-muted: #475569;
    --app-border: #64748b;

    /* Brand. The accent fills primary buttons and active states; the link colour is the same
       family a step darker, because a fill and a word on a page need different contrast. */
    --app-accent: #2563eb;
    --app-accent-contrast: #ffffff;
    --app-link: #1d4ed8;

    /* Clinical signals. These mean something: a state, not decoration. */
    --app-critical: #b91c1c;
    --app-warning: #92400e;
    --app-positive: #166534;
    --app-info: #155e75;

    /* Match highlighting in the document viewer, and the reviewer's verdict on a match. */
    --app-highlight-bg: #cffafe;
    --app-highlight-ink: #155e75;
    --app-confirmed-bg: #dcfce7;
    --app-confirmed-ink: #166534;
    --app-rejected-bg: #fee2e2;
    --app-rejected-ink: #b91c1c;

    /* The navigation chrome is near-black in both themes: the mockups keep the instrument-panel
       frame dark around the document, whichever way the reading surface is lit. */
    --app-nav-bg: #0a0e1a;
    --app-nav-ink: #e2e8f0;
    --app-nav-active-ink: #06b6d4;
    --app-nav-active-bg: rgba(6, 182, 212, 0.14);

    --app-radius: 0.5rem;
    --app-radius-sm: 0.375rem;

    /* Inter is the founder-selected pairing for headings and body. Named, never fetched. */
    --app-font: Inter, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --app-font-heading: var(--app-font);
    --app-font-mono: ui-monospace, SFMono-Regular, Monaco, Consolas, monospace;

    --bs-primary: var(--app-accent);
    --bs-link-color: var(--app-link);
    --bs-link-hover-color: var(--app-link);
    --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"] {
    /* The reading environment the specification defaults to: near-black, for long sessions. */
    --app-surface: #0a0e1a;
    --app-surface-raised: #111827;
    --app-surface-sunken: #0d1626;

    --app-text: #f1f5f9;
    --app-text-muted: #94a3b8;
    --app-border: #64748b;

    --app-accent: #2563eb;
    --app-accent-contrast: #ffffff;
    --app-link: #60a5fa;

    --app-critical: #ef4444;
    --app-warning: #f59e0b;
    --app-positive: #22c55e;
    --app-info: #06b6d4;

    --app-highlight-bg: #0e4a57;
    --app-highlight-ink: #67e8f9;
    --app-confirmed-bg: #14532d;
    --app-confirmed-ink: #86efac;
    --app-rejected-bg: #4c1d1d;
    --app-rejected-ink: #fca5a5;
}

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

/* Weight and tracking carry the hierarchy, because one family is in play for everything. */
h1, h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3, h4, h5, h6 {
    font-weight: 600;
}

code, kbd, samp, pre {
    font-family: var(--app-font-mono);
}

.card {
    background-color: var(--app-surface-raised);
    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); }