:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #2f3138; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ffa600; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #000000; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */

  --color-theme-secondary-dark: #0645a3; /* hoverstate */
  --color-theme-secondary: #0b5dd7ef; /* A theme color that can be used for specific elements like buttons, links, or highlights. It can be overridden by other variables in specific contexts */
  --color-theme-primary-dark: #ff7f00; /* hoverstate */
  --color-theme-primary: #ff9900; /* A theme color that can be used for specific elements like buttons, links, or highlights. It can be overridden by other variables in specific contexts */
  --color-text: #3b3d44; /* Default text color for paragraphs and general text content */
  --color-text-dark: #000000; /* Default text color for dark mode or sections */
  --color-text-light: #ffffff; /* Default text color for light mode or sections */
  --color-link-dark: #000000; /* Default color for links in dark mode or sections */
  --color-link-light: #ffffff; /* Default color for links in light mode or sections */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  /* --nav-color: #ffffffa6;  The default color of the main navmenu links */
  --nav-hover-color: var(--color-theme-primary); /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  /* --nav-dropdown-background-color: #ffffff; Used as the background color for dropdown items that appear when hovering over primary navigation items */
  /* --nav-dropdown-color: #212529; Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #f87000; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* test */

:root {
  /* Pas hier je thema-kleuren aan */

  /* --color-primary:      #4f5aff; 
  --color-primary-dark: #1558b0;  */

  --color-bg-toggle:    #ffffff; /* achtergrond pill-groep */
  --color-text-active:  #ffffff; /* tekst kleur actieve pill */
  --color-text-inactive:#444444; /* tekst kleur inactieve pill */
}

:root {
  /* Thema‐kleuren */
  --color-bg-toggle:         #f1f3f5;
  --color-text-active:       #ffffff;
  --color-text-inactive:     #495057;
  --color-border:            #ddd;
  --color-input-border:      #ccc;
  --color-box-shadow:        rgba(0, 0, 0, 0.05);
  --color-box-shadow-hover:  rgba(0, 0, 0, 0.07);
  --color-text-muted:        #555;
}