:root {
  --background: 39 56% 89%; /* Beige: #F2E8D5 */
  --foreground: 223 37% 16%; /* Navy: #1A233A */
  --card: 0 0% 100%;
  --card-foreground: 223 37% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 223 37% 16%;
  --primary: 38 73% 58%; /* Sandy Gold: #E4A347 */
  --primary-foreground: 238 73% 58%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 38 27% 95%;
  --muted-foreground: 223 10% 40%;
  --accent: 25 57% 46%; /* Terracotta: #B87333 */
  --accent-foreground: 39 56% 95%; /* Light beige for text on terracotta */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 39 20% 80%; /* A border color that works with beige */
  --input: 0 0% 100%;
  --ring: 38 73% 58%;
  --radius: 0.5rem;
  --navy: #1A233A;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Noto Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-navy { background-color: var(--navy); }
.bg-input { background-color: hsl(var(--input)); }


.text-background { color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-white { color: white; }


.border-border { border-color: hsl(var(--border)); }
.border-primary { border-color: hsl(var(--primary)); }


html {
    scroll-behavior: smooth;
}
.card {
    border-radius: var(--radius);
    border-width: 1px;
    border-color: hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.card-hover {
  @apply transition-all duration-300 ease-in-out;
}
.card-hover:hover {
    @apply -translate-y-2 shadow-2xl;
}
.tab-button.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.accordion-item[open] .accordion-trigger svg {
  transform: rotate(180deg);
}

.font-headline {
    font-family: 'Space Grotesk', sans-serif;
}

.text-muted-foreground {
  font-size: 22px; /* Nieuwe fontgrootte */
  line-height: 1.4; /* Optioneel voor betere leesbaarheid */
}

button, input, optgroup, select, textarea {
    font-size: 24px;
    
}

input[type="checkbox"] {
  width: 1.2rem;  /* standaard is vaak ~1rem */
  height: 1.2rem;
  transform: scale(1.1);
  margin-right: 0.2rem;
  cursor: pointer;
}