/* Theme tokens of the UI modernisation (spec docs/specs/ui-modernisierung.md, ADR 0002).
   Loaded directly after Bootstrap: colours, type scale, radii and shadows are defined here
   once; Bootstrap's variables and the app's own CSS read them. Values come from the chosen
   theme (iron blue, lime accent, Figtree). */

/* ---------- Tokens ---------- */

:root, [data-bs-theme=light] {
	--hwa-deep: #1B3550;
	--hwa-on-deep-muted: #C4D3E2;
	--hwa-bg: #F2F5F8;
	--hwa-card: #FFFFFF;
	--hwa-input-bg: #FFFFFF;
	--hwa-text: #17202A;
	--hwa-text-rgb: 23, 32, 42;
	--hwa-muted: #4B5A69;
	--hwa-border: #DCE3EA;
	--hwa-border-strong: #848F9C; /* 3:1 on card and ground (WCAG 1.4.11) */
	--hwa-primary: #2E5F8A;
	--hwa-primary-rgb: 46, 95, 138;
	--hwa-primary-hover: #234A6C;
	--hwa-primary-hover-rgb: 35, 74, 108;
	--hwa-primary-active: #1D3F5C;
	--hwa-primary-ink: #FFFFFF;
	--hwa-primary-soft: #E1EBF4;
	--hwa-lime: #A6D85B;
	--hwa-lime-hover: #94C548;
	--hwa-lime-ink: #1A2A08;
	--hwa-lime-soft: #EAF6D8;
	--hwa-env: #F2B33D; /* marks non-production profiles */
	--hwa-env-ink: #2B1D00;
	--hwa-env-hover: #E3A42E;
	--hwa-on-deep: #FFFFFF; /* text and icons on the deep blue bars */
	--hwa-on-deep-hover: rgba(255, 255, 255, 0.14);
	--hwa-on-deep-line: rgba(255, 255, 255, 0.14);
	--hwa-primary-soft-hover: #D2E1EE;
	--hwa-hero-from: #E3ECF4; /* start panel gradient */
	--hwa-hero-to: #9DBEDD;
	--hwa-fold-from: #FFFFFF; /* folded corner of the start panel */
	--hwa-fold-mid: #DCE7F1;
	--hwa-fold-to: #C3D5E7;
	--hwa-fold-shadow: rgba(23, 32, 42, 0.22);
	--hwa-danger: #C0392B;
	--hwa-danger-rgb: 192, 57, 43;
	--hwa-danger-text: #A93226;
	--hwa-danger-soft: #FBE9E7;
	--hwa-disabled: #E3E8ED;
	--hwa-disabled-ink: #6A7683;
	--hwa-shadow-sm: 0 1px 2px rgba(23, 32, 42, 0.06), 0 2px 8px rgba(23, 32, 42, 0.05);
	--hwa-shadow-md: 0 4px 24px rgba(23, 32, 42, 0.10);
	--hwa-lane: #EDF2F7; /* column lanes of comparison tables */
	--hwa-lane-hover: #C6D8EA; /* lane cell of the hovered row */
	--hwa-lane-feat-hover: #DCE7F2; /* name cell of the hovered row */
	--hwa-mark-acc: #CADAEA; /* mark "mit Konto": 7.7:1 with its ink, distinct from the lane */
	--hwa-mark-acc-ink: #1D3F5C;
	--hwa-mark-misc: #DCE2E8; /* neutral grey mark for values outside the legend */
	--hwa-mark-misc-ink: #2B3642;
	--hwa-mark-misc-line: #A9B4BF;
	--hwa-modal-head: #CADAEA; /* dialog heads (User, D2): title 11.5:1, icon 4.7:1 */
}

/* Dark values of the chosen theme. Inactive until phase 3: layout.html fixes
   data-bs-theme="light", print pages never set it. */
[data-bs-theme=dark] {
	--hwa-deep: #0F2338;
	--hwa-on-deep-muted: #A9BCCF;
	--hwa-bg: #0E151C;
	--hwa-card: #16202A;
	--hwa-input-bg: #0E151C;
	--hwa-text: #E8EEF4;
	--hwa-text-rgb: 232, 238, 244;
	--hwa-muted: #A2B0BE;
	--hwa-border: #2A3846;
	--hwa-border-strong: #5B6E82;
	--hwa-primary: #7FB2E0;
	--hwa-primary-rgb: 127, 178, 224;
	--hwa-primary-hover: #A3C8EA;
	--hwa-primary-hover-rgb: 163, 200, 234;
	--hwa-primary-active: #BFD8F0;
	--hwa-primary-ink: #0A1826;
	--hwa-primary-soft: #1F3347;
	--hwa-lime: #B6E26B;
	--hwa-lime-hover: #C6EA88;
	--hwa-lime-ink: #16220A;
	--hwa-lime-soft: #243520;
	--hwa-env: #F2B33D;
	--hwa-env-ink: #2B1D00;
	--hwa-env-hover: #E3A42E;
	--hwa-on-deep: #FFFFFF;
	--hwa-on-deep-hover: rgba(255, 255, 255, 0.14);
	--hwa-on-deep-line: rgba(255, 255, 255, 0.14);
	--hwa-primary-soft-hover: #294560;
	--hwa-hero-from: #1A2A3B;
	--hwa-hero-to: #23405E;
	--hwa-fold-from: #3A5068;
	--hwa-fold-mid: #2A3E54;
	--hwa-fold-to: #1F3044;
	--hwa-fold-shadow: rgba(0, 0, 0, 0.5);
	--hwa-danger: #E26D5F;
	--hwa-danger-rgb: 226, 109, 95;
	--hwa-danger-text: #F2A097;
	--hwa-danger-soft: #3A201D;
	--hwa-disabled: #24303B;
	--hwa-disabled-ink: #7E8C9A;
	--hwa-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--hwa-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
	--hwa-lane: #1C2834;
	--hwa-lane-hover: #2A3D52;
	--hwa-lane-feat-hover: #22303F;
	--hwa-mark-acc: #2A4560;
	--hwa-mark-acc-ink: #D6E6F5;
	--hwa-mark-misc: #2A3540;
	--hwa-mark-misc-ink: #D2DAE2;
	--hwa-mark-misc-line: #5B6E82;
	--hwa-modal-head: #2A4560;
}

:root {
	--hwa-font: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
	--hwa-fs-h1: clamp(1.75rem, 1.2rem + 2vw, 2.375rem); /* 38 px from tablet width up */
	--hwa-fs-h2: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); /* 28 */
	--hwa-fs-h3: 1.375rem; /* 22 */
	--hwa-fs-lead: 1.125rem; /* 18 */
	--hwa-fs-body: 1rem; /* 16 */
	--hwa-fs-small: 0.875rem; /* 14 */
	--hwa-radius: 0.75rem; /* 12: buttons, fields, menus */
	--hwa-radius-lg: 1rem; /* 16: cards, modals */
}

/* ---------- Shared buttons ---------- */

/* light iron-blue button for secondary actions (start page, scope page) */
.hwa-btn-soft {
	--bs-btn-color: var(--hwa-primary);
	--bs-btn-bg: var(--hwa-primary-soft);
	--bs-btn-border-color: var(--hwa-primary-soft);
	--bs-btn-hover-color: var(--hwa-primary-hover);
	--bs-btn-hover-bg: var(--hwa-primary-soft-hover);
	--bs-btn-hover-border-color: var(--hwa-primary-soft-hover);
	--bs-btn-active-color: var(--hwa-primary-hover);
	--bs-btn-active-bg: var(--hwa-primary-soft-hover);
	--bs-btn-active-border-color: var(--hwa-primary-soft-hover);
}

/* amber button for the demo (start page, scope page): colour of the non-production marker */
.hwa-btn-env {
	--bs-btn-color: var(--hwa-env-ink);
	--bs-btn-bg: var(--hwa-env);
	--bs-btn-border-color: var(--hwa-env);
	--bs-btn-hover-color: var(--hwa-env-ink);
	--bs-btn-hover-bg: var(--hwa-env-hover);
	--bs-btn-hover-border-color: var(--hwa-env-hover);
	--bs-btn-active-color: var(--hwa-env-ink);
	--bs-btn-active-bg: var(--hwa-env-hover);
	--bs-btn-active-border-color: var(--hwa-env-hover);
}

/* ---------- Bootstrap variables ---------- */

:root, [data-bs-theme] {
	--bs-font-sans-serif: var(--hwa-font);
	--bs-body-color: var(--hwa-text);
	--bs-body-color-rgb: var(--hwa-text-rgb);
	/* Bootstrap paints fields, menus and modals with --bs-body-bg, so it is the surface colour;
	   only the page itself gets the tinted ground (body below). */
	--bs-body-bg: var(--hwa-card);
	--bs-secondary-color: var(--hwa-muted);
	--bs-secondary-bg: var(--hwa-disabled);
	--bs-heading-color: var(--hwa-text);
	--bs-primary: var(--hwa-primary);
	--bs-primary-rgb: var(--hwa-primary-rgb);
	--bs-primary-text-emphasis: var(--hwa-primary-hover);
	--bs-primary-bg-subtle: var(--hwa-primary-soft);
	--bs-danger: var(--hwa-danger);
	--bs-danger-rgb: var(--hwa-danger-rgb);
	--bs-danger-text-emphasis: var(--hwa-danger-text);
	--bs-danger-bg-subtle: var(--hwa-danger-soft);
	--bs-link-color: var(--hwa-primary);
	--bs-link-color-rgb: var(--hwa-primary-rgb);
	--bs-link-hover-color: var(--hwa-primary-hover);
	--bs-link-hover-color-rgb: var(--hwa-primary-hover-rgb);
	--bs-border-color: var(--hwa-border);
	--bs-border-radius: var(--hwa-radius);
	--bs-border-radius-sm: 0.5rem;
	--bs-border-radius-lg: var(--hwa-radius-lg);
	/* Focus ring: solid 2 px iron blue with a 2 px gap (WCAG 2.2: at least 2 px, 3:1 contrast).
	   Declared here, not on :root alone, so a theme switch recolours it. */
	--hwa-focus-ring: 0 0 0 2px var(--hwa-card), 0 0 0 4px var(--hwa-primary);
	--bs-focus-ring-color: var(--hwa-primary);
	--bs-focus-ring-width: 2px;
	--bs-focus-ring-opacity: 1;
	--bs-form-invalid-color: var(--hwa-danger-text);
	--bs-form-invalid-border-color: var(--hwa-danger);
}

body {
	background-color: var(--hwa-bg);
}

/* Printouts stay white and flat (print.css prints backgrounds exactly). */
@media print {
	body {
		background-color: #fff;
	}

	.card {
		box-shadow: none;
	}
}

/* ---------- Typography ---------- */

h1, .h1 {
	font-size: var(--hwa-fs-h1);
	font-weight: 700;
	letter-spacing: -0.02em;
}

h2, .h2 {
	font-size: var(--hwa-fs-h2);
	font-weight: 700;
	letter-spacing: -0.015em;
}

h3, .h3 {
	font-size: var(--hwa-fs-h3);
	font-weight: 600;
}

.lead {
	font-size: var(--hwa-fs-lead);
}

/* ---------- Components ---------- */

.bg-brand {
	background-color: var(--hwa-deep);
}

.btn {
	--bs-btn-font-weight: 600;
	--bs-btn-focus-box-shadow: var(--hwa-focus-ring);
}

.btn-primary {
	--bs-btn-color: var(--hwa-primary-ink);
	--bs-btn-bg: var(--hwa-primary);
	--bs-btn-border-color: var(--hwa-primary);
	--bs-btn-hover-color: var(--hwa-primary-ink);
	--bs-btn-hover-bg: var(--hwa-primary-hover);
	--bs-btn-hover-border-color: var(--hwa-primary-hover);
	--bs-btn-active-color: var(--hwa-primary-ink);
	--bs-btn-active-bg: var(--hwa-primary-active);
	--bs-btn-active-border-color: var(--hwa-primary-active);
	--bs-btn-disabled-color: var(--hwa-disabled-ink);
	--bs-btn-disabled-bg: var(--hwa-disabled);
	--bs-btn-disabled-border-color: var(--hwa-disabled);
}

/* Underline tabs */
.nav-tabs {
	--bs-nav-tabs-border-color: var(--hwa-border);
	--bs-nav-tabs-border-radius: 0;
	--bs-nav-tabs-link-hover-border-color: transparent transparent var(--hwa-border-strong);
	--bs-nav-tabs-link-active-color: var(--hwa-text);
	--bs-nav-tabs-link-active-bg: transparent;
	--bs-nav-tabs-link-active-border-color: transparent transparent var(--hwa-primary);
	--bs-nav-link-color: var(--hwa-muted);
	--bs-nav-link-hover-color: var(--hwa-text);
}

.nav-tabs .nav-link {
	border-width: 0 0 2px;
}

.nav-tabs .nav-link.active {
	font-weight: 600;
}

.card {
	--bs-card-bg: var(--hwa-card);
	--bs-card-border-color: var(--hwa-border);
	--bs-card-border-radius: var(--hwa-radius-lg);
	--bs-card-inner-border-radius: calc(var(--hwa-radius-lg) - 1px);
	--bs-card-cap-bg: transparent;
	box-shadow: var(--hwa-shadow-sm);
}

.dropdown-menu {
	--bs-dropdown-bg: var(--hwa-card);
	--bs-dropdown-border-color: var(--hwa-border);
	--bs-dropdown-border-radius: var(--hwa-radius);
	--bs-dropdown-inner-border-radius: calc(var(--hwa-radius) - 1px);
	--bs-dropdown-box-shadow: var(--hwa-shadow-md);
	--bs-dropdown-link-active-bg: var(--hwa-primary);
	--bs-dropdown-link-active-color: var(--hwa-primary-ink);
	--bs-dropdown-link-hover-bg: var(--hwa-primary-soft);
	box-shadow: var(--bs-dropdown-box-shadow);
}

/* 5.3 takes these values from .dropdown-menu; the sidebar uses headers outside a menu. */
.dropdown-header {
	--bs-dropdown-header-padding-x: 1rem;
	--bs-dropdown-header-padding-y: 0.5rem;
	--bs-dropdown-header-color: var(--hwa-muted);
}

.modal {
	--bs-modal-bg: var(--hwa-card);
	--bs-modal-border-color: transparent;
	--bs-modal-border-radius: var(--hwa-radius-lg);
	--bs-modal-inner-border-radius: var(--hwa-radius-lg);
	--bs-modal-box-shadow: var(--hwa-shadow-md);
}

.badge {
	--bs-badge-font-weight: 600;
	--bs-badge-border-radius: 999px;
}

.alert {
	--bs-alert-border-radius: var(--hwa-radius);
}

/* 5.3 colours alerts only together with .alert; own markup and JS use .alert-danger alone.
   :where keeps the specificity of 5.1, so later rules such as .error still win. */
.alert-danger:where(:not(.alert)) {
	color: var(--hwa-danger-text);
	background-color: var(--hwa-danger-soft);
	border-color: var(--hwa-danger);
}

/* ---------- Forms ---------- */

/* Focus as in current design systems: fields show the ring on every focus (the user must see
   where the typing goes), buttons and links only for keyboard focus (Bootstrap's .btn already
   uses :focus-visible). */
.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: var(--hwa-primary);
	box-shadow: var(--hwa-focus-ring);
}

a:focus-visible {
	outline: 2px solid var(--hwa-primary);
	outline-offset: 2px;
}

/* Some buttons also carry .form-control; Bootstrap's .form-control:focus would paint them
   like a field after a click. */
.btn.form-control:focus {
	color: var(--bs-btn-color);
	background-color: var(--bs-btn-bg);
	border-color: var(--bs-btn-border-color);
	box-shadow: none;
}

.btn.form-control:focus-visible {
	box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Only the variable: some buttons also carry .form-control, and their own colours must win. */
.form-control, .form-select, .form-check-input {
	--bs-border-color: var(--hwa-border-strong);
}

.form-control::placeholder {
	color: var(--hwa-muted);
}

/* 5.3 only greys out :disabled fields, so read-only fields would look editable. */
.form-control[readonly] {
	background-color: var(--hwa-disabled);
}

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

/* ---------- The app's own button classes ---------- */

/* 5.3 colours every .btn on hover, press (:active, .active, .show) and when disabled from
   variables that only Bootstrap's own variants set; for the app's button classes they are
   undefined, which made the button transparent. Each class names its colours once here
   (--hwa-btn-*, hover colours as --hwa-btn-hover-*, defaulting to the resting ones); its own
   rules and every state read them. Pressed looks like hover, as with Bootstrap 5.1. */
:is(.btn-default, .btn-hwa, .btn-black, .btn-footer, .btn-blue,
	.btn-hwa-blue, .btn-dark-blue, .btn-mid-blue, .btn-light-blue, .btn-result-blue,
	.btn-dark-green, .btn-green, .btn-light-green, .btn-selected, .btn-fb,
	.btn-tw, .btn-go, .btn-email-delete, .btn-facebook, .btn-google, .btn-linkedin,
	.cbx-btn) {
	--bs-btn-color: var(--hwa-btn-color, var(--hwa-text));
	--bs-btn-bg: var(--hwa-btn-bg, transparent);
	--bs-btn-border-color: var(--hwa-btn-border-color, transparent);
	--hwa-btn-hover-color: var(--bs-btn-color);
	--hwa-btn-hover-bg: var(--bs-btn-bg);
	--bs-btn-hover-color: var(--hwa-btn-hover-color);
	--bs-btn-hover-bg: var(--hwa-btn-hover-bg);
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: var(--bs-btn-hover-bg);
	--bs-btn-active-border-color: var(--bs-btn-border-color);
	--bs-btn-disabled-color: var(--bs-btn-color);
	--bs-btn-disabled-bg: var(--bs-btn-bg);
	--bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

/* Where a button carries several of these classes, the later line wins; keep the order.
   Every line names its hover colours too, so a later class never shows the hover colour of
   an earlier one (as each class had its own :hover rule before).
   .btn-hwa and .btn-hwa-blue are the brand blue and follow the primary colour; the others
   keep the colours of the existing pages until phase 2. */
.btn-default { --hwa-btn-color: #333; --hwa-btn-bg: #fff; --hwa-btn-border-color: #ccc; --hwa-btn-hover-bg: #e3eaf4; --hwa-btn-hover-color: #333; }
.btn-hwa { --hwa-btn-color: var(--hwa-primary); --hwa-btn-bg: var(--hwa-card); --hwa-btn-border-color: var(--hwa-primary); --hwa-btn-hover-color: var(--hwa-primary-ink); --hwa-btn-hover-bg: var(--hwa-primary); }
.btn-black { --hwa-btn-color: white; --hwa-btn-bg: #222222; --hwa-btn-border-color: #454545; --hwa-btn-hover-bg: #454545; --hwa-btn-hover-color: white; }
.btn-footer { --hwa-btn-color: #cccccc; --hwa-btn-hover-color: white; }
.btn-blue { --hwa-btn-color: white; --hwa-btn-bg: #1E88E5; --hwa-btn-hover-bg: #1172c6; --hwa-btn-hover-color: white; }
.btn-hwa-blue { --hwa-btn-color: var(--hwa-primary-ink); --hwa-btn-bg: var(--hwa-primary); --hwa-btn-hover-color: var(--hwa-primary-ink); --hwa-btn-hover-bg: var(--hwa-primary-hover); }
.btn-dark-blue { --hwa-btn-color: white; --hwa-btn-bg: #0b57c4; --hwa-btn-hover-bg: #074caf; --hwa-btn-hover-color: white; }
.btn-mid-blue { --hwa-btn-color: white; --hwa-btn-bg: #49aafc; --hwa-btn-hover-bg: #49aafc; --hwa-btn-hover-color: white; }
.btn-light-blue { --hwa-btn-color: white; --hwa-btn-bg: #b8cfef; --hwa-btn-hover-bg: #acc8ef; --hwa-btn-hover-color: white; }
.btn-result-blue { --hwa-btn-color: white; --hwa-btn-bg: #6faadc; --hwa-btn-hover-bg: #6faadc; --hwa-btn-hover-color: white; }
.btn-dark-green { --hwa-btn-color: white; --hwa-btn-bg: #367b96; --hwa-btn-hover-bg: #31728c; --hwa-btn-hover-color: white; }
.btn-green { --hwa-btn-color: white; --hwa-btn-bg: #00897c; --hwa-btn-hover-bg: #026d63; --hwa-btn-hover-color: white; }
.btn-light-green { --hwa-btn-color: white; --hwa-btn-bg: #6cb28f; --hwa-btn-hover-bg: #63a885; --hwa-btn-hover-color: white; }
.btn-selected { --hwa-btn-color: black; --hwa-btn-bg: #a6d608; --hwa-btn-hover-bg: #a6d608; --hwa-btn-hover-color: black; }
.btn-fb { --hwa-btn-color: #fff; --hwa-btn-bg: #3b5998; --hwa-btn-hover-bg: #496ebc; --hwa-btn-hover-color: #fff; }
.btn-tw { --hwa-btn-color: #fff; --hwa-btn-bg: #55acee; --hwa-btn-hover-bg: #59b5fa; --hwa-btn-hover-color: #fff; }
.btn-go { --hwa-btn-color: #fff; --hwa-btn-bg: #db3236; --hwa-btn-hover-bg: #e44b4e; --hwa-btn-hover-color: #fff; }
.btn-email-delete { --hwa-btn-color: black; --hwa-btn-hover-color: black; }

/* bootstrap-social brand colours (fix/css/bootstrap-social.css, which also sets their hover
   colours); Facebook and LinkedIn are shown disabled on the login page. */
.btn-facebook { --hwa-btn-color: #fff; --hwa-btn-bg: #3b5998; --hwa-btn-border-color: rgba(0, 0, 0, 0.2); }
.btn-google { --hwa-btn-color: #fff; --hwa-btn-bg: #dd4b39; --hwa-btn-border-color: rgba(0, 0, 0, 0.2); }
.btn-linkedin { --hwa-btn-color: #fff; --hwa-btn-bg: #007bb6; --hwa-btn-border-color: rgba(0, 0, 0, 0.2); }