/* ==========================================================================
   Looks (Peter, 29 Sep 2026): each person picks a look with the palette button in the top bar —
   colours, font, brightness and contrast together. Classic is the FEOS default (feos.css);
   the others redefine the theme's variables on <body class="feos-look-…">.
   ========================================================================== */

/* ---- Bright: white pages, a brighter blue, Inter ----------------------- */
body.feos-look-bright {
    --feos-ink: #0b4f9c;
    --feos-ink-2: #0d5cb5;
    --feos-accent: #0b6fde;
    --feos-accent-dark: #0859b5;
    --feos-accent-soft: #e6f0fd;
    --feos-sky: #3aa0ff;
    --feos-canvas: #ffffff;
    --feos-line: #e3e8ef;
    --feos-muted: #4b5563;
    --font-family: 'Inter', 'Hanken Grotesk', Arial, sans-serif;
    --body-bg: #ffffff;
    --text-color: #111827;
    --text-muted-color: #6b7280;
    --link-record-color: #0b4f9c;
    --brand-primary: #0b6fde;
    --btn-primary-bg: #0b6fde;
    --btn-primary-border: #0b6fde;
    --btn-primary-hover-bg: #0859b5;
    --btn-primary-hover-border: #0859b5;
    --link-color: #0b6fde;
    --navbar-inverse-bg-7: #0d5cb5;
    --navbar-inverse-link-hover-bg: #0d5cb5;
    --navbar-inverse-link-active-bg: #0a4585;
    --navbar-inverse-link-icon-color: #c9ddf6;
    --navbar-link-hover-bg: #0d5cb5;
    --navbar-link-active-bg: #0a4585;
    --navbar-link-icon-color: #c9ddf6;
    --default-heading-bg-color: #f3f7fd;
}
body.feos-look-bright .panel { box-shadow: 0 1px 3px rgba(15, 40, 80, .08); }

/* ---- High contrast: black on white, stronger lines, larger and clearer letters -------------------------------- */
body.feos-look-contrast {
    --feos-ink: #000000;
    --feos-ink-2: #1a1a1a;
    --feos-accent: #004a99;
    --feos-accent-dark: #00346b;
    --feos-accent-soft: #e0ecf8;
    --feos-sky: #66b3ff;
    --feos-canvas: #ffffff;
    --feos-line: #7a8591;
    --feos-muted: #2b2b2b;
    --font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
    --font-size-base: 15px;
    --font-size-small: 13px;
    --body-bg: #ffffff;
    --text-color: #000000;
    --text-muted-color: #333333;
    --gray-light: #444444;
    --link-record-color: #00346b;
    --default-border-color: #7a8591;
    --panel-default-border: #7a8591;
    --brand-primary: #004a99;
    --btn-primary-bg: #004a99;
    --btn-primary-border: #004a99;
    --btn-primary-hover-bg: #00346b;
    --btn-primary-hover-border: #00346b;
    --link-color: #004a99;
    --link-hover-color: #00346b;
    --navbar-inverse-link-color: #ffffff;
    --navbar-link-color: #ffffff;
    --navbar-inverse-link-icon-color: #ffffff;
    --navbar-link-icon-color: #ffffff;
    --default-heading-bg-color: #eef3f8;
}
body.feos-look-contrast .panel { box-shadow: none; border-width: 1.5px; }
body.feos-look-contrast #main a:not(.btn):not(.dropdown-toggle):not(.nav-link) { text-decoration: underline; }
body.feos-look-contrast #main th a, body.feos-look-contrast #main .panel-heading a { text-decoration: none; }
body.feos-look-contrast .label, body.feos-look-contrast .btn { font-weight: 700; }
body.feos-look-contrast .list > table > thead > tr > th { color: #000; }
body.feos-look-contrast .form-control { border-color: #555; }
body.feos-look-contrast a:focus-visible, body.feos-look-contrast button:focus-visible,
body.feos-look-contrast input:focus-visible, body.feos-look-contrast select:focus-visible,
body.feos-look-contrast textarea:focus-visible { outline: 3px solid #ffb000 !important; outline-offset: 1px; }

/* ---- Warm: soft warm paper, teal, Nunito Sans ------------------------- */
body.feos-look-warm {
    --feos-ink: #134e4a;
    --feos-ink-2: #1a5f5a;
    --feos-accent: #0f766e;
    --feos-accent-dark: #0b5c56;
    --feos-accent-soft: #e6f4f2;
    --feos-sky: #2bb3a3;
    --feos-canvas: #faf7f2;
    --feos-line: #eadfd2;
    --feos-muted: #6b5e53;
    --font-family: 'Nunito Sans', 'Hanken Grotesk', Arial, sans-serif;
    --body-bg: #faf7f2;
    --panel-bg: #fffdf9;
    --text-color: #1f2a2e;
    --text-muted-color: #7c7066;
    --link-record-color: #134e4a;
    --brand-primary: #0f766e;
    --btn-primary-bg: #0f766e;
    --btn-primary-border: #0f766e;
    --btn-primary-hover-bg: #0b5c56;
    --btn-primary-hover-border: #0b5c56;
    --link-color: #0f766e;
    --link-hover-color: #0b5c56;
    --navbar-inverse-bg-7: #1a5f5a;
    --navbar-inverse-link-hover-bg: #1a5f5a;
    --navbar-inverse-link-active-bg: #0f3f3c;
    --navbar-link-hover-bg: #1a5f5a;
    --navbar-link-active-bg: #0f3f3c;
    --default-heading-bg-color: #f4efe7;
}
body.feos-look-warm .list table.table > tbody > tr:hover > td { background-color: #eef7f5 !important; }
body.feos-look-contrast .list table.table > tbody > tr:hover > td { background-color: #fff3c4 !important; }

/* ---- The palette button and its menu ------------------------------------------------------------------------ */
.feos-look-picker > a { font-size: 17px; }
.feos-look-menu { min-width: 270px; padding: 6px 0; }
.feos-look-menu .feos-look-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; }
.feos-look-menu .feos-look-item:hover { background: var(--feos-accent-soft); }
.feos-look-menu .feos-look-item.active { font-weight: 700; }
.feos-look-menu .feos-look-swatch { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #d0d7de; }
.feos-look-menu .feos-look-swatch i { display: block; width: 14px; height: 22px; }
.feos-look-menu .feos-look-sample { font-size: 18px; width: 30px; text-align: center; }
.feos-look-menu .feos-look-name { display: block; line-height: 1.2; }
.feos-look-menu .feos-look-note { display: block; font-size: 11px; color: #6b7280; font-weight: 400; }