/*
Theme Name: Digitale Balans
Theme URI: https://digitalebalans.nl
Author: Digitale Balans Team
Author URI: https://digitalebalans.nl
Description: Een WordPress thema voor Digitale Balans met ACF Gutenberg blocks. Gebouwd met PHP, Bootstrap SCSS, en Vanilla JavaScript - geen React, Tailwind, JSX of TSX.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digitale-balans
*/

/* Fonts */
@font-face {
  font-family: "Serenity-Bold";
  src: local("Serenity Bold");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Serenity-Medium";
  src: local("Serenity Medium");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Serenity-Light";
  src: local("Serenity Light");
  font-weight: 300;
  font-style: normal;
}

/* CSS Variables for design tokens */
:root {
  /* Typography Variables */
  --DB-h1-font-size: 70px;
  --DB-h1-line-height: 74px;
  --DB-h1-letter-spacing: -1.4px;
  --DB-h1-font-weight: 700;
  --DB-h1-font-style: normal;

  --DB-h2-font-size: 50px;
  --DB-h2-line-height: 52px;
  --DB-h2-letter-spacing: -1px;
  --DB-h2-font-weight: 700;
  --DB-h2-font-style: normal;

  --DB-h3-font-size: 35px;
  --DB-h3-line-height: 39px;
  --DB-h3-letter-spacing: -0.7px;
  --DB-h3-font-weight: 700;
  --DB-h3-font-style: normal;

  --DB-body-medium-font-size: 22px;
  --DB-body-medium-line-height: 35px;
  --DB-body-medium-letter-spacing: -0.5px;
  --DB-body-medium-font-weight: 300;
  --DB-body-medium-font-style: normal;

  --DB-body-klein-font-size: 20px;
  --DB-body-klein-line-height: 26px;
  --DB-body-klein-letter-spacing: -0.4px;
  --DB-body-klein-font-weight: 300;
  --DB-body-klein-font-style: normal;

  --buttontekst-groot-font-size: 20px;
  --buttontekst-groot-line-height: 20px;
  --buttontekst-groot-letter-spacing: 0px;
  --buttontekst-groot-font-weight: 500;
  --buttontekst-groot-font-style: normal;

  /* Color Variables */
  --color-white: #ffffff;
  --color-primary-blue: #01266c;
  --color-secondary-orange: #faa634;
  --color-light-blue: #eaeaf8;
  --color-light-blue-hover: #dedef8;
  --color-pink: #cf215c;
  --color-purple: #4131ae;
  --color-green: #0f9168;
  --color-dark-text: #383838;
  --color-darker-text: #2d2d2d;
  --color-footer-text: #141138;
}

/* Font families */
.font-DB-h1 {
  font-family: "Serenity-Bold", Helvetica, Arial, sans-serif;
}

.font-DB-h2 {
  font-family: "Serenity-Bold", Helvetica, Arial, sans-serif;
}

.font-DB-h3 {
  font-family: "Serenity-Bold", Helvetica, Arial, sans-serif;
}

.font-DB-body-medium {
  font-family: "Serenity-Light", Helvetica, Arial, sans-serif;
}

.font-DB-body-klein {
  font-family: "Serenity-Light", Helvetica, Arial, sans-serif;
}

.font-buttontekst-groot {
  font-family: "Serenity-Medium", Helvetica, Arial, sans-serif;
}

/* Base Styles */
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  overflow-x: hidden;
}