@import url("https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Yeseva+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cascadia+Mono:ital,wght@0,200..700;1,200..700&display=swap");

html{ scroll-behavior:smooth; }

:root{
  --clr-black:#000000;
  --clr-white:#ffffff;
  --clr-gray:#d1d1d1;
  --clr-teal:#008080;
  --clr-lime:#62ff00;
  --clr-olive:#808000;
  --clr-brown:#aa4400;
  --clr-amber:#aa8800;

  --bg-page:#ffffff;
  --text-main:#1a100e;
  --border-soft:#e9dfd7;

  --primary:var(--clr-amber);
  --primary-600:#8f7100;
  --primary-300:#d7b64a;

  --secondary:var(--clr-brown);
  --secondary-600:#883802;
  --secondary-300:#c96a2a;

  --info:var(--clr-teal);
  --success:var(--clr-lime);
  --muted:#8b7e70;

  --radius:14px;
  --gap:16px;
  --pad:16px;
  --container:920px;

  /* typografie gelijkstemmend met je “bovenstaande” stijl */
  --fz-base:18px;
  --fz-small:0.95rem;
  --fz-h1:clamp(2.2rem,4vw,3.2rem);
  --fz-h2:clamp(1.4rem,2.2vw,2rem);
  --fz-lead:1.2rem;

  --fw-body:300;
  --fw-strong:600;
  --fw-head:400;

  --shadow-soft:0 10px 25px rgba(0,0,0,.08);
}

/* Base / reset */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--bg-page);
  color:var(--text-main);
  font-family:"Afacad Flux",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-optical-sizing:auto;
  font-weight:var(--fw-body);
  font-style:normal;
  font-variation-settings:"slnt" 0;
  font-size:var(--fz-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, video, canvas, svg{
  display:block;
  max-width:100%;
  height:auto;
}

input, button, textarea, select{
  font:inherit;
  color:inherit;
}

:focus-visible{
  outline:2px solid var(--info);
  outline-offset:3px;
}

/* Headings gelijk aan “bovenstaande” stijl */
h1, h2, h3, h4{
  font-family:"Cascadia Mono",sans-serif;
  font-weight:var(--fw-head);
  line-height:1.1;
  color:var(--text-main);
}

/* Links */
a{
  color:var(--secondary-600);
  text-decoration:none;
}
a:hover{ color:var(--secondary); }

/* Layout */
main{
  max-width:var(--container);
  margin:0 auto;
  padding:24px;
}

header{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:var(--container);
  margin:0 auto;
  padding:24px;
}

header h1{
  font-size:var(--fz-h1);
  margin:0;
  padding:0;
  line-height:1.05;
}

header figure{ max-width:130px; }
header figure img{
  width:100%;
  height:auto;
  display:block;
}

main h1{
  font-size:var(--fz-h1);
  padding-bottom:1.3rem;
}

section.grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}

@media (min-width:900px){
  section.grid{ grid-template-columns:1fr 1fr; }
}

/* Cards */
article.card{
  background:var(--clr-white);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border-soft);
  color:var(--text-main);
}

article.card h2{
  margin:0 0 12px;
  font-size:var(--fz-h2);
  line-height:1.15;
  color:var(--text-main);
}

p{
  margin:0;
  font-size:1.2rem;
  color:var(--text-main);
}

p.hint{
  color:#6e7a92;
  margin-top:8px;
  font-size:var(--fz-small);
}

small{ color:#6e7a92; }

/* Form */
label{
  display:block;
  margin:8px 0 6px;
  color:var(--clr-black);
  font-weight:var(--fw-body);
}

input, select{
  width:90%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--muted);
  background:var(--clr-gray);
  color:var(--clr-black);
  outline:none;
}

input:focus, select:focus{
  border-color:var(--primary-600);
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.checks{
  display:grid;
  gap:10px;
  margin-top:6px;
}

.checks label{
  display:flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
  user-select:none;
}

.checks input[type="checkbox"]{ width:auto; }

.actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* Buttons — typografie gelijkgestemd + tekst altijd wit */
button{
  appearance:none;
  border:0;
  border-radius:13px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:var(--fw-strong);
  letter-spacing:.2px;
  transition:transform .08s ease, filter .15s ease, background .15s ease;
}

.btn,
a.btn,
button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:13px;
  border:1px solid transparent;
  background:linear-gradient(var(--secondary),var(--secondary-600));
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, filter .15s ease, background .15s ease;
  max-width:230px;
  min-width:30%;
  text-align:center;

  font-weight:var(--fw-strong);
  color:var(--clr-white) !important;
}

.btn--primary,
a.btn--primary,
button.btn--primary{
  background:linear-gradient(var(--primary),var(--primary-600));
  color:var(--clr-white) !important;
}

.btn:hover,
a.btn:hover,
button.btn:hover{
  background:linear-gradient(var(--clr-olive),#6d6d00);
  color:var(--clr-white) !important;
}

.btn:active,
a.btn:active,
button.btn:active{
  transform:translateY(1px);
  color:var(--clr-white) !important;
}

.btn:visited,
a.btn:visited{
  color:var(--clr-white) !important;
}

/* Legacy classes (indien je ze nog gebruikt) */
.btn-primary,
a.btn-primary,
button.btn-primary{
  background:var(--clr-black);
  color:var(--clr-white) !important;
  text-align:center;
  display:inline-block;
  border-radius:4px;
  padding:13px;
  font-size:1.2rem;
  font-weight:var(--fw-body);
  min-width:30%;
  max-width:230px;
  text-decoration:none;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  background:var(--primary-600);
  color:var(--clr-white) !important;
}

.btn-ghost,
a.btn-ghost,
button.btn-ghost{
  background:var(--clr-white);
  color:var(--clr-black) !important;
  text-align:center;
  display:inline-block;
  border-radius:4px;
  padding:13px;
  font-size:1.2rem;
  font-weight:var(--fw-body);
  border:1px solid var(--primary-600);
  min-width:30%;
  max-width:230px;
  text-decoration:none;
}

/* Messages */
.msg{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #2a2f3a;
  background:#11131a;
  color:#e8eefc;
  white-space:pre-wrap;
  font-family:"Cascadia Mono",sans-serif;
  font-weight:300;
}

.msg.success{
  border-color:#1e7e34;
  background:#0f1a12;
  color:#b7ffca;
}

.msg.error{
  border-color:#842029;
  background:#1a0f12;
  color:#ffc1c7;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 900px){
  :root{
    --gap:12px;
    --pad:12px;
    --fz-base:17px;
  }

  main{ padding:18px; }
  header{ padding:18px; }

  .row{ grid-template-columns:1fr; }
  input, select{ width:100%; }

  .actions{ gap:12px; }
  .btn, a.btn, button.btn{ min-width:100%; max-width:100%; }
}

@media (max-width: 480px){
  :root{
    --gap:10px;
    --pad:10px;
    --fz-base:16px;
  }

  header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  header figure{ max-width:160px; }
  header h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); }

  article.card{ padding:16px; }
  p{ font-size:1.1rem; }
}
  .actions .btn { display: inline-flex; align-items: center; gap: .5rem; }