/* Library Skin Overrides for New Library */

/* 1. Load Lato */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");

/* 2. Override core Bootstrap theme variables */

:root,
[data-bs-theme="light"] {
  /* Brand colours */
  --bs-primary: rgb(77, 161, 169);
  --bs-primary-rgb: 77, 161, 169;

  --bs-secondary: rgb(46, 80, 119);
  --bs-secondary-rgb: 46, 80, 119;

  /* Use secondary as the dark accent for plum areas */
  --bs-plum: rgb(46, 80, 119);
  --bs-plum-rgb: 46, 80, 119;

  /* Body background and text */
  --bs-body-bg: rgb(246, 244, 240);
  --bs-body-bg-rgb: 246, 244, 240;

  --bs-body-color: #22252b;
  --bs-body-color-rgb: 34, 37, 43;

  /* Headings and links should match the new primary tone */
  --bs-heading-color: rgb(77, 161, 169);
  --bs-link-color: rgb(77, 161, 169);
  --bs-link-color-rgb: 77, 161, 169;

  /* Slightly darker hover colour for contrast */
  --bs-link-hover-color: rgb(56, 118, 124);
  --bs-link-hover-color-rgb: 56, 118, 124;

  /* Typography */
  --bs-font-sans-serif: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* 3. Global typography tweaks */

body {
  font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* 4. Primary and secondary button reskin */

/* Primary button uses new primary colour */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(77, 161, 169);
  --bs-btn-border-color: rgb(77, 161, 169);

  /* Darker variants for hover and active states */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(63, 132, 140);
  --bs-btn-hover-border-color: rgb(59, 124, 132);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(59, 124, 132);
  --bs-btn-active-border-color: rgb(55, 117, 125);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(77, 161, 169);
  --bs-btn-disabled-border-color: rgb(77, 161, 169);
}

/* Secondary button uses the dark blue tone */

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(46, 80, 119);
  --bs-btn-border-color: rgb(46, 80, 119);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(38, 66, 97);
  --bs-btn-hover-border-color: rgb(36, 62, 92);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(36, 62, 92);
  --bs-btn-active-border-color: rgb(33, 57, 85);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(46, 80, 119);
  --bs-btn-disabled-border-color: rgb(46, 80, 119);
}