/* Adding custom font definitions based on JSON */
@font-face {
  font-family: 'Jost';
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/jost/Jost-Regular.woff');
}

@font-face {
  font-family: 'Nunito Sans';
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/nunito-sans/NunitoSans-Regular.woff');
}

/* Setting up the CSS variables */
:root {
  --foreground: #000000;
  --background: #ffffff;
  --light: #fefefe;
  --dark: #010101;
  --headings: #020202;
  --text-regular: #606060;
  --text-light: #909090;
  --text-lighter: #D4D4D4;
  --background-light: #FBFAFA;
  --primary: #CD815B;
  --secondary: #F5D9CB;
  --tertiary: #EBF3F3;
  --stroke: #E7E7E7;
  
  /* Typography settings */
  --font-base: "Nunito Sans", sans-serif;
  --font-heading: "Jost", sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2.125rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.125rem;
}

/* Overwriting Bootstrap defaults */
body {
  background-color: var(--background);
  font-family: var(--font-base);
  color: var(--text-regular);
}

/* Titles and Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--headings);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Bootstrap Button Overrides */

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--foreground) !important; /* Change this if you want another text color */
}

.btn-success {
    background-color: var(--tertiary) !important;
    border-color: var(--tertiary) !important;
    color: var(--foreground) !important;
}

.btn-danger {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* You can continue the pattern for other button types e.g. .btn-info, .btn-warning, .btn-danger, etc. Just match them with your preferred color variables from :root. */