@import '../assets/mainframe.css';
/*
  De waardes in dit bestand mag je aanpassen als dat nodig blijkt te zijn.

  - De HSL waardes worden gebruikt om het hover effect te creëren.
    Gebruik hiervoor de waardes die terug te vinden zijn in het Figma bestand.
    Is er geen Figma bestand kun je deze ook terugvinden door de HEX code in Google te plaatsen.
*/

/* Variables */
:root {

  /* theme-color-variables */
  --bs-primary: var(--pr-color);
  --bs-primary-rgb: var(--pr-color-rgb);
  --bs-primary-hsl: var(--pr-color-hsl);

  --bs-secondary: var(--sd-color);
  --bs-secondary-rgb: var(--sd-color-rgb);
  --bs-secondary-hsl: var(--sd-color-hsl);

  --bs-tertiary: var(--ter-color);
  --bs-tertiary-rgb: var(--ter-color-rgb);
  --bs-tertiary-hsl: var(--ter-color-hsl);

  --bs-quaternary: var(--qua-color);
  --bs-quaternary-rgb: var(--qua-color-rgb);
  --bs-quaternary-hsl: var(--qua-color-hsl);

  --bs-heading-color: var(--heading-color);
  --bs-text-color: var(--tw_text-color);

  /* Body */
  --bs-body-font-family: 'Mulish', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--bs-black);
  --bs-body-bg: var(--bs-primary);

  /* Typography */
  --display-1-font-size: 6rem;
  --display-2-font-size: 5.5rem;
  --display-3-font-size: 4.5rem;
  --display-4-font-size: 3.25rem;

  --h1-font-size: 2.5rem;
  --h2-font-size: 2.25rem;
  --h3-font-size: 2rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1rem;

  --headings-font-family: 'Overpass', sans-serif;
  --headings-font-weight: 600;
  --headings-line-height: 1.2;
  --headings-color: var(--bs-primary);

  /* Link */
  --bs-link-color: var(--bs-quaternary);
  --bs-link-hover-color: var(--bs-quaternary-hsl);

  /* Transition */
  --bs-transition: all 0.25s ease-in-out;

}


/* Navbar */
.nav-link {
  --bs-nav-link-font-size: var(--bs-body-font-size);
  --bs-nav-link-font-weight: 700;
  --bs-nav-link-color: var(--bs-black);
  --bs-nav-link-hover-color: var(--bs-secondary);
  --bs-navbar-active-color: var(--bs-secondary);
}


/* Buttons */
.btn {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-family: var(--bs-body-font-family);
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: var(--bs-body-line-height);
  --bs-btn-color: var(--bs-black);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 2px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 0.625rem;
  --bs-btn-hover-border-color: transparent;
}