@charset "utf-8";

/****************
 * theme-blue.css - the blue colour theme.
 *
 * Split out of style.css so that it can be loaded on its own inside the portable custom
 * interaction iframe, which deliberately does not load style.css: PCI 1.0 section 3.2 asks a
 * delivery engine to keep its own CSS away from a module's DOM, and style.css is full of engine
 * rules. A theme is the exception - the candidate chose it, and the interaction has to honour it
 * like the rest of the page - so the theme travels on its own.
 *
 * Linked after style.css on the application's pages (page.html, page-bare.html,
 * test-delivery.html) and after pci-frame.css inside the frame; in both cases it is an overlay on
 * the sheet before it.
 *
 * Everything blue lives here, including the #aib-header chrome - one theme, one file. Those
 * selectors cannot match anything inside the frame, which has no application chrome in it.
 *
 * Adding another theme: copy this file, keep the --aib-theme-name declaration (the bridge reads
 * it back to decide whether the frame can honour a theme by name - see applyTheme in
 * communication-bridge.js), and link it in the same four places, plus resources/xsl/raw.xsl
 * (the View Source listing). A dark theme also has to restate the rules Bootstrap and
 * style.css key on [data-bs-theme="dark"]; theme-abyss.css is the example.
 ****************/

[data-bs-theme="blue"] {
    color-scheme: light;
    /* Read back by the PCI bridge to tell that this sheet is loaded. See the file header. */
    --aib-theme-name: blue;
    --bs-body-color: #1a2e4a;
    --bs-body-color-rgb: 26, 46, 74;
    --bs-body-bg: #eef3ff;
    --bs-body-bg-rgb: 238, 243, 255;
    --bs-emphasis-color: #0a1929;
    --bs-emphasis-color-rgb: 10, 25, 41;
    --bs-secondary-color: rgba(26, 46, 74, 0.75);
    --bs-secondary-color-rgb: 26, 46, 74;
    --bs-secondary-bg: #dce8ff;
    --bs-secondary-bg-rgb: 220, 232, 255;
    --bs-tertiary-color: rgba(26, 46, 74, 0.5);
    --bs-tertiary-color-rgb: 26, 46, 74;
    --bs-tertiary-bg: #ccd9f7;
    --bs-tertiary-bg-rgb: 204, 217, 247;
    --bs-heading-color: #0a1929;
    --bs-link-color: #0057cc;
    --bs-link-color-rgb: 0, 87, 204;
    --bs-link-hover-color: #003ea0;
    --bs-link-hover-color-rgb: 0, 62, 160;
    --bs-border-color: #a8bfe0;
    --bs-border-color-translucent: rgba(26, 46, 74, 0.175);
    --bs-primary-text-emphasis: #002e80;
    --bs-secondary-text-emphasis: #364e6e;
    --bs-success-text-emphasis: #0a5140;
    --bs-info-text-emphasis: #004d6b;
    --bs-warning-text-emphasis: #6b4c00;
    --bs-danger-text-emphasis: #6b0000;
    --bs-light-text-emphasis: #364e6e;
    --bs-dark-text-emphasis: #1a2e4a;
    --bs-primary-bg-subtle: #c8dcff;
    --bs-secondary-bg-subtle: #dce8ff;
    --bs-success-bg-subtle: #d0f0e8;
    --bs-info-bg-subtle: #c8eaf5;
    --bs-warning-bg-subtle: #fff3c8;
    --bs-danger-bg-subtle: #ffd4d4;
    --bs-light-bg-subtle: #eef3ff;
    --bs-dark-bg-subtle: #a8bfe0;
    --bs-primary-border-subtle: #80aeff;
    --bs-secondary-border-subtle: #a8bfe0;
    --bs-success-border-subtle: #5dc9b0;
    --bs-info-border-subtle: #7ecaec;
    --bs-warning-border-subtle: #ffd560;
    --bs-danger-border-subtle: #f8a0a0;
    --bs-light-border-subtle: #ccd9f7;
    --bs-dark-border-subtle: #6485b0;
    --bs-form-valid-color: #157050;
    --bs-form-valid-border-color: #157050;
    --bs-form-invalid-color: #cc0000;
    --bs-form-invalid-border-color: #cc0000;
}

[data-bs-theme="blue"] #aib-header {
    background-color: #1e5fa8;
    border-bottom-color: #1450a0;
    color: #e8f0ff;
}
[data-bs-theme="blue"] #aib-header a,
[data-bs-theme="blue"] #aib-header .btn,
[data-bs-theme="blue"] #aib-header .navbar-brand {
    color: #e8f0ff;
}
[data-bs-theme="blue"] #aib-header .dropdown-menu {
    --bs-dropdown-bg: #1a5298;
    --bs-dropdown-border-color: #2468c0;
    --bs-dropdown-link-color: #e8f0ff;
    --bs-dropdown-link-hover-bg: #0e3d7a;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-active-bg: #0e3d7a;
    --bs-dropdown-link-active-color: #ffffff;
}