/* We gebruiken hier Cascade layers, wat mogelijke problemen met Specificiteit voorkomt
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers
   https://css-tricks.com/css-cascade-layers/ */


@layer styleguide {

  @font-face {
    font-family: 'Parkinsans';
    src: url('fonts/Parkinsans.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  :root {
    /* kleuren */
    --background-color: #FFFFFF;
    --background-color-secondary: #F6F5F5;
    --accentcolor: #E0B000;
    --textcolor: #000000;
    --secondary-text--color: #898A8D;
    --formcolor: #466EBF;
    --footercolor: #F9F2D4;
    --accent-primary: #B2291F;
    --accent-secondary: #AA2677;


    /* Typografie */

    --font-family: "Parkinsans", sans-serif;
    --heading-font-weight: 500;

    /* headings*/
    --h1-size: 40px;
    --h2-size: 24px;
    --h3-size: 18px;

    --p-size: 16px;
    --line-height: 16px;


    /* Formulier elementen */

  }


  body {
    font-family: var(--font-family);
  }

  .font-xxl {
    font-size: var(--h1-size);
    font-family: var(--font-family);
    line-height: var(--line-height);
  }

  .font-xl {
    font-size: var(--h2-size);
    font-family: var(--font-family);
    line-height: var(--line-height);

  }

  .font-l {
    font-size: var(--h3-size);
    font-family: var(--font-family);
    line-height: var(--line-height);

  }

  .font-normal {
    line-height: var(--line-height);
    font-family: var(--font-family);
    font-size: var(--p-size);
  }



  .button1 {
    border-radius: 10px;
    width: 60px;
    background-color: black;
    color: white;
  }

  .addbutton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 30px;
    padding: 0.5rem 2rem;
    background-color: #D39926;
    color: white;
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    height: fit-content;
  }

  .addbutton:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
  }


  .addbutton img {
    width: 30px;
    height: 30px;
  }


  .color-background {
    background-color: var(--background-color);
    color: var(--textcolor);
  }

  .color-background-secondary {
    background-color: var(--background-color-secondary);
    color: var(--textcolor);
  }

  .color-accentcolor {
    background-color: var(--accentcolor);
  }

  .color-accent-primary {
    background-color: var(--accent-primary);
  }

  .color-accent-secondary {
    background-color: var(--accent-secondary);
  }

    .secondary-text-color {
    background-color: var(--secondary-text--color);
  }

  .color-textcolor {
    background-color: var(--textcolor);
    color: var(--background-color);
  }

  .color-formcolor {
    background-color: var(--formcolor);
  }

  .color-footercolor {
    background-color: var(--footercolor);
    color: var(--textcolor);
  }

}