/*
 * Brand tokens for the Bureau B (hn_bureaub) site + Bootstrap 5 theming.
 * Replaces SCSS _Variables.scss + the compiled Bootstrap 4 overrides.
 */
:root {
    /* Palette */
    --brand-black: #000000;
    --brand-white: #ffffff;

    --oxford-blue: #363d52;
    --jungle-mist: #c1dcdd;
    --albescent-white: #f5efd1;

    --main: var(--albescent-white);
    --main-gradient: #faf6e6;          /* lighten(#f5efd1, 5%) */
    --gradient: var(--jungle-mist);
    --gradient-light: #e2efef;          /* lighten(#c1dcdd, 10%) */
    --background-color: var(--main);
    --hover-1: var(--albescent-white);
    --hover-2: black;

    --brand-primary: var(--brand-white);
    --text-color: var(--brand-white);
    --link-color: var(--brand-white);
    --link-hover-color: var(--oxford-blue);
    --link-disabled-color: lightgrey;

    /* Layout */
    --layout-border-radius: 8px;
    --layout-x-padding: 1.5rem;
    --layout-y-margin: 1.25rem;

    /* Typography */
    --font-family-base: 'NectoMono', sans-serif;
    --font-size-base: 1.1875rem;
    --font-size-large: 34px;
    --font-size-small: 16px;
    --font-size-label: 12px;
    --font-size-h1: 48px;
    --font-size-h2: 31px;
    --font-size-h3: 20px;

    /* --- Bootstrap 5 overrides --- */
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-color: var(--brand-black);
    --bs-link-color: var(--brand-white);
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: var(--oxford-blue);
    --bs-link-hover-color-rgb: 54, 61, 82;
    --bs-link-decoration: none;
    --bs-headings-font-weight: 700;
}

/* BS5 compiles these as literals (the --bs-* vars above are ignored), and BS5
   changed the defaults vs BS4: links are underlined and headings are weight 500.
   Re-apply the site's BS4 behaviour explicitly. */
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; }
/* Generic BS headings: production (BS4 RFS) sizes from the 1.1875rem base — fixed
   >=1200px, fluid calc() below. Component titles keep their own fixed sizes
   (var(--font-size-h*)) via higher-specificity selectors loaded after this file. */
h1, .h1 { font-size: 2.96875rem; }
h2, .h2 { font-size: 2.375rem; }
h3, .h3 { font-size: 2.078125rem; }
h4, .h4 { font-size: 1.78125rem; }
h5, .h5 { font-size: 1.484375rem; }
h6, .h6 { font-size: 1.1875rem; }
@media (max-width: 1200px) {
    h1, .h1 { font-size: calc(1.42188rem + 2.0625vw); }
    h2, .h2 { font-size: calc(1.3625rem + 1.35vw); }
    h3, .h3 { font-size: calc(1.33281rem + .99375vw); }
    h4, .h4 { font-size: calc(1.30313rem + .6375vw); }
    h5, .h5 { font-size: calc(1.27344rem + .28125vw); }
}
/* BS5 navbar has 0 horizontal padding by default; BS4 had 1rem. */
.navbar { --bs-navbar-padding-x: 1rem; padding-left: 1rem; padding-right: 1rem; }
/* BS5 added the xxl (1400px) container step (1320px); BS4 capped at 1140px. */
@media (min-width: 1400px) { .container { max-width: 1140px; } }

/* Former bootstrap/buttons customisation */
.btn { border-radius: 5px; }
.btn.btn-primary, .btn.btn-default {
    --bs-btn-bg: var(--brand-white);
    --bs-btn-border-color: var(--brand-white);
    --bs-btn-color: var(--brand-black);
    --bs-btn-hover-bg: var(--brand-black);
    --bs-btn-hover-border-color: var(--brand-white);
    --bs-btn-hover-color: var(--brand-white);
}