/* ==========================================================
   site.css — Basis / Theme / Layout
========================================================== */
:root{
  /* ==========================================================
     Design tokens (leidend)
     - Gebruik deze variabelen overal waar mogelijk.
     - Geen component-styling in site.css (tiles staan in tiles.css).
  ========================================================== */

  /* Colors */
  --bg: #071521;
  --text: #eaf2ff;
  --muted: #a7bdd8;
  --link: #7fc7ff;

  /* Surfaces */
  --panel: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);

  /* Effects */
  --shadow: 0 14px 34px rgba(0,0,0,.45);
  --radius: 16px;

  /* Brand accents (subtiel) */
  --brand: #ffb35c;
  --brand2:#4dd0c8;

  /* Layout */
  --topbar-h: 60px;
	
	
  /* Spacing scale (basis) */
  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;

	
   /* Shadow scale */
   --shadow-1: 0 10px 22px rgba(0,0,0,.20); /* kaarten/tiles */
   --shadow-2: 0 14px 34px rgba(0,0,0,.45); /* panels/focus */
   --shadow-3: 0 18px 50px rgba(0,0,0,.35); /* extra zwaar (prikbord) */

   /* Backward compatible alias */
   --shadow: var(--shadow-2);

	
	/* Radius scale */
   --r1: 10px;   /* small */
   --r2: 14px;   /* medium */
   --r3: 16px;   /* default cards/panels */
   --r4: 22px;   /* extra rounded (hero/featured) */

   /* Backward compatible alias */
   --radius: var(--r3);

	
}


*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--link); }

/* Subtiele nautische waterglow */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 380px at 15% -10%, rgba(127,199,255,.14), transparent 60%),
    radial-gradient(700px 320px at 90% 10%, rgba(77,208,200,.10), transparent 55%),
    radial-gradient(800px 420px at 50% 110%, rgba(255,179,92,.07), transparent 60%);
}

body > *{
  position: relative;
  z-index: 1;
}

/* Layout helpers */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

/* Content start onder sticky header */
main.container{
  padding-top: calc(18px + var(--topbar-h));
}

/* Scroll-offset voor koppen */
h1, h2, h3, [id]{
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}

h1,h2,h3{ margin:16px 0 10px; }
p{ margin:0 0 10px; opacity:.92; }
ul{ margin:0 0 14px 18px; }



/* ==========================================================
   Footer
========================================================== */
.site-footer{
  opacity: .75;
  font-size: 13px;
  padding-bottom: 28px;
}

.site-footer__hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 18px 0;
}

.site-footer__text{
  color: var(--text);
}