/*
 * Brand tokens for the Tapete (hn_templates) site + Bootstrap 5 theming.
 * Replaces the former SCSS _Variables.scss + the compiled Bootstrap 4 variable
 * overrides. Loaded after bootstrap.min.css, before the component CSS.
 */
:root {
    /* Palette */
    --brand-white: #ffffff;
    --brand-grey: #aeaeae;
    --brand-beige-light: #fff7ee;
    --brand-beige: #dfd1c0;
    --brand-brown-light: #bda991;
    --brand-brown: #976e3b;
    --brand-brown-dark: #6b5437;

    --brand-primary: var(--brand-brown);
    --text-color: var(--brand-brown);
    --link-color: var(--brand-brown);
    --link-hover-color: #4e391e;          /* darken(#976e3b, 20%) */
    --link-disabled-color: #b3b3b3;        /* lighten(grey, 20%) */
    --artist-group-header-border-color: var(--brand-brown-dark);

    --gradient: var(--brand-beige);
    --gradient-light: var(--brand-beige-light);

    /* Typography */
    --font-family-base: 'Work Sans', sans-serif;
    --headings-font-family: 'Anton', sans-serif;
    --font-size-base: 1.188rem;
    --font-size-large: 2.125rem;
    --font-size-small: 16px;
    --font-size-label: 0.75rem;
    --font-size-h1: 3.375rem;
    --font-size-h2: 2.75rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.485rem;
    --font-size-h6: 1.188rem;

    /* Navigation */
    --zindex-navbar: 1000;
    --navbar-default-bg: var(--brand-white);
    --navbar-default-color: var(--brand-primary);
    --navbar-default-link-color: var(--brand-primary);
    --navbar-default-link-hover-color: var(--brand-brown-dark);
    --navbar-default-link-active-color: var(--brand-brown-dark);

    /* --- Bootstrap 5 overrides (re-apply the former $-variable theming) --- */
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-color: var(--text-color);
    --bs-link-color: var(--link-color);
    --bs-link-color-rgb: 151, 110, 59;
    --bs-link-hover-color: var(--link-hover-color);
    --bs-link-hover-color-rgb: 78, 57, 30;
    --bs-link-decoration: none;
    --bs-headings-font-weight: 500;
}

/* Headings use the display font at the former custom sizes (no --bs- token for these).
   Sizes mirror production (Bootstrap 4 RFS): fixed size >=1200px, fluid calc() below. */
h1, .h1 { font-family: var(--headings-font-family); font-size: var(--font-size-h1); }
h2, .h2 { font-family: var(--headings-font-family); font-size: var(--font-size-h2); }
h3, .h3 { font-family: var(--headings-font-family); font-size: var(--font-size-h3); }
h4, .h4 { font-family: var(--headings-font-family); font-size: var(--font-size-h4); }
h5, .h5 { font-family: var(--headings-font-family); font-size: var(--font-size-h5); }
h6, .h6 { font-family: var(--headings-font-family); font-size: var(--font-size-h6); }
@media (max-width: 1200px) {
    h1, .h1 { font-size: calc(1.4625rem + 2.55vw); }
    h2, .h2 { font-size: calc(1.4rem + 1.8vw); }
    h3, .h3 { font-size: calc(1.325rem + .9vw); }
    h4, .h4 { font-size: calc(1.275rem + .3vw); }
    h5, .h5 { font-size: calc(1.2735rem + .282vw); }
}

/* BS5 changed defaults vs BS4 (the --bs-* vars above are compiled as literals and
   ignored): links are underlined by default. Restore the site's non-underlined links. */
a { text-decoration: none; }
.navbar { --bs-navbar-padding-x: 1rem; padding-left: 1rem; padding-right: 1rem; }
/* BS5 navbars ignore :root --bs-nav-link-color (.navbar-nav rebinds it to --bs-navbar-color). */
.navbar {
    --bs-navbar-color: var(--navbar-default-link-color);
    --bs-navbar-hover-color: var(--navbar-default-link-hover-color);
    --bs-navbar-active-color: var(--navbar-default-link-active-color);
}
/* BS5 added the xxl (1400px) container step (1320px); BS4 capped at 1140px. */
@media (min-width: 1400px) { .container { max-width: 1140px; } }

/* Former _BootstrapOverrides + bootstrap/buttons customisations */
h1, h2, h3, h4, h5, h6 { margin-top: 40px; font-weight: 500; }
.btn { border-radius: 0; }
.btn.btn-primary, .btn.btn-default {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: #7b5a30;
    --bs-btn-hover-border-color: #72532d;
    --bs-btn-active-bg: var(--link-hover-color);
    --bs-btn-active-border-color: var(--link-hover-color);
    --bs-btn-color: var(--brand-white);
    --bs-btn-hover-color: var(--brand-white);
}

.btn-default.focus,.btn-default:focus {
    box-shadow: 0 0 0 .2rem rgba(167,132,88,.5)
}