/* ==========================================================================
   Design Tokens
   WIO Presentation System
   ==========================================================================
*/

:root {
  /* ======================================================================
       Typography
       ====================================================================== */

  /* Font families */

  --font-body: "Source Serif 4", serif;
  --font-heading: "Source Serif 4", serif;
/* ======================================================================
   Navigation
   ====================================================================== */

--font-family-navigation: var(--font-body);

--font-size-navigation: 1.35rem;

--font-size-navigation-small: 1rem;

--font-weight-navigation: 500;
  
/* ======================================================================
   Language Switch
   ====================================================================== */

--font-family-language-switch: var(--font-body);

--font-size-language-switch: 1.3rem;

--font-weight-language-switch: 500;

--font-size-language-code: 1rem;

--font-size-language-flag: 1.5rem;

/* --------------------------------------------------  
Page Intro
-------------------------------------------------- */

--font-family-page-intro-eyebrow: var(--font-family-body);

--font-family-page-intro-heading: var(--font-family-heading);

--font-family-page-intro-subtitle: var(--font-family-body);

  /* Font weights */

  --font-weight-body: 400;
  --font-weight-heading: 600;
  --font-weight-bold: 700;

  /* Font sizes */

  --font-size-body: 1.2rem;

  --font-size-h1: 2.75rem;
  --font-size-h2: 2.1rem;
  --font-size-h3: 1.6rem;
  --font-size-h4: 1.375rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.125rem;

  --font-size-small: 0.875rem;

  /* Line heights */

  --line-height-body: 1.7;

  --line-height-h1: 1.15;
  --line-height-h2: 1.2;
  --line-height-h3: 1.3;
  --line-height-h4: 1.3;
  --line-height-h5: 1.4;
  --line-height-h6: 1.4;

  /* ======================================================================
       Colors
       ====================================================================== */

  /* --color-text: #373636; */
  /* --color-text-h1: #d07c23; vervangen door --theme-color-heading*/
  /* --color-background: #ffffff; */

  /* --color-heading-test: #ce0c0c;
  --color-text-test: #333333; */

  /* ======================================================================
   Theme Colors
   ====================================================================== */
/* Nieuwe voorstellen vanuit Chatgpt */

--theme-color-background: #F6F5EF; /* zacht, warm gebroken wit */
--theme-color-menu: #E5E8D8;       /* subtiel groenig accent t.o.v. achtergrond */

--theme-color-text: #303B20;       /* donkere, goed leesbare groentint */
--theme-color-heading: #485A23;    /* jouw bestaande kopkleur: prima */

--theme-color-primary: #65793C;    /* logo-/merkgroen */
--theme-color-secondary: #B8C5C8;  /* koel blauwgrijs, spaarzaam gebruiken */

--theme-color-accent: #B95738;     /* gedempt terracotta */
--theme-color-highlight: #B69B47;  /* warm okergeel/goud */

--theme-color-menu-special-background: #F2E3DB; /* heel zacht terracotta */
--theme-color-menu-special-text: #485A23;       /* donkergroen */
--theme-color-menu-special-accent: #B95738;     /* terracotta */
/* --theme-color-background: #f9f9f6;
/* oude kleur geel-beige #f1ead0 -#eeeedf*/

/* --theme-color-text: #65793C; */


/* --theme-color-heading: #485a23; */
/* color-text-h1: #d07c23; -eerst #1B445F */
/* --theme-color-primary: #d0d7e0; */

/* --theme-color-secondary: #B8C5C8; */
/* Eerst verbering #B8C5C8 blauwgrijs */
/* tweede voorstel warmer: #C9C5B5 */
/* 3e optie #AEBFC7 koeler */
/* 4e A9AD91 olijfgroen igg */
/* was een soort groen (te fel) #78934D */
/* --theme-color-accent: #DD6D40; */

/* --theme-color-highlight: #D9C881; */ 

/* ======================================================================
   Header (menu instellingen)
   ====================================================================== */

--theme-header-background: var(--theme-color-primary);

--theme-header-text: var(--theme-color-text);

--theme-header-accent: var(--theme-color-accent);

--theme-header-dropdown: var(--theme-color-primary);

--theme-header-border: var(--theme-color-highlight);

/* ======================================================================
   Footer
   ====================================================================== */

--theme-footer-background: var(--theme-color-secondary);

--theme-footer-text: #ffffff;

  /* ======================================================================
       Spacing / padding / margins
       ====================================================================== */

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 6.00rem;

  --space-section-footer: var(--space-xl);
  /* ======================================================================
   Semantic Spacing
   ====================================================================== */
  --space-section-first: var(--space-xl);
  --space-section: var(--space-xl); /* section + section spacing */
  --space-component: var(--space-lg);
  --space-content: var(--space-md);
  --space-inline: var(--space-sm);

  /* --------------------------------------------------
   Page Intro
-------------------------------------------------- */

--font-size-page-intro-eyebrow: clamp(1.5rem, 2vw, 2rem);

--font-size-page-intro-heading: clamp(2.25rem, 7vw, 4.75rem);

--font-size-page-intro-subtitle: clamp(1.25rem, 3vw, 2rem);

--space-page-intro-eyebrow-heading: 0.6rem;

--space-page-intro-heading-subtitle: 1rem;

--space-page-intro-cta: 0.5rem;
/* ======================================================================
   Page Width
   ====================================================================== */

--page-padding-mobile: 1rem;

--page-padding-tablet: 2rem;

--page-max-width: 80rem;
  /* ======================================================================
       Borders
       ====================================================================== */

  /* Reserved */

  /* ======================================================================
       Border Radius
       ====================================================================== */

  /* Reserved */

  /* ======================================================================
       Shadows
       ====================================================================== */

  /* Reserved */

  /* ======================================================================
       Layering
       ====================================================================== */

  /* Reserved */

  /* ======================================================================
       Animation
       ====================================================================== */

  /* Reserved */

  /* misschien nog border colors per thema ofzo? */
}