/*
 * Brand tokens for the Howdy Partner Booking (hn_howdypartnerbooking) site + BS5 theming.
 * Replaces SCSS _Variables.scss + the compiled Bootstrap 4 overrides.
 */
:root {
    /* Palette */
    --brand-black: #000000;
    --brand-white: #ffffff;
    --brand-grey: #4f4f4f;

    --brand-pink-light: #ebafc1;
    --brand-pink-medium: #d87c98;
    --brand-pink: #d4587d;
    --brand-pink-dark: #b9365e;

    --tuscany: #c85c37;
    --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;
    --background-hover-color: var(--jungle-mist);

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

    --box-shadow: 3px 3px 5px 0 rgba(174, 174, 174, .25);

    /* Typography */
    --font-family-base: 'Bitter', sans-serif;
    --font-size-base: 1.1875rem;
    --font-size-large: 34px;
    --font-size-small: 16px;
    --font-size-label: 12px;
    /* BS4 heading sizes: $font-size-base (1.1875rem) × 2.5/2/1.75/1.5/1.25/1.
       (The old $font-size-h1/h2/h3 — 48/31/20px — were BS3 leftovers that BS4
       never read; these values match what production actually renders.) */
    --font-size-h1: 2.96875rem;   /* 47.5px */
    --font-size-h2: 2.375rem;     /* 38px */
    --font-size-h3: 2.078125rem;  /* 33.25px */
    --font-size-h4: 1.78125rem;   /* 28.5px */
    --font-size-h5: 1.484375rem;  /* 23.75px */
    --font-size-h6: 1.1875rem;    /* 19px */

    /* Navigation */
    --navbar-default-bg: var(--background-color);
    --navbar-default-color: var(--brand-primary);
    --navbar-default-link-color: var(--brand-primary);

    /* --- Bootstrap 5 overrides --- */
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-color: var(--oxford-blue);
    --bs-link-color: var(--tuscany);
    --bs-link-color-rgb: 200, 92, 55;
    --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; }
/* Former shared _BootstrapOverrides (BS reboot zeroes heading top margins). */
h1, h2, h3, h4, h5, h6 { margin-top: 40px; }
/* BS5's compiled heading sizes assume a 1rem base and shrink responsively;
   re-apply the BS4 sizes derived from the site's 1.1875rem base. */
h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }
/* Below 1200px production (BS4 RFS) scales the headings fluidly; re-apply that. */
@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: 4px; }
.btn.btn-primary, .btn.btn-default {
    --bs-btn-bg: var(--tuscany);
    --bs-btn-border-color: var(--tuscany);
    --bs-btn-color: var(--brand-white);
    --bs-btn-hover-bg: var(--jungle-mist);
    --bs-btn-hover-border-color: var(--jungle-mist);
    --bs-btn-hover-color: var(--oxford-blue);
}
.btn.btn-default:hover { color: var(--jungle-mist); background-color: var(--link-hover-color); }