/*
 * base.css
 * Design tokens, licht/donker thema, textuur (grain + vignet), reset en gedeelde basisstijlen.
 * Gebruikt door: alle pagina's
 */

:root {
  --accent-soft: rgba(139, 30, 45, 0.08);
  --nav-bg: rgba(245, 242, 236, 0.86);
  --band-bg: #171513;
  --band-ink: #f5f2ec;
  --band-muted: rgba(245, 242, 236, 0.55);
  --band-soft: rgba(245, 242, 236, 0.72);
  --band-line: rgba(245, 242, 236, 0.16);
  --band-accent: #e8b9bf;
  --grain-o: 0.17;
  --vignette: rgba(90, 70, 50, 0.1);
  color-scheme: light;
  --bg: #f5f2ec;
  --surface: #ebe6dd;
  --surface-2: #e2dccf;
  --ink: #171513;
  --ink-2: #3a3530;
  --muted: #6e665c;
  --line: rgba(23, 21, 19, 0.13);
  --accent: #8b1e2d;
  --accent-hover: #6f1622;
  --on-accent: #fbf8f4;
  --display: "Inter Tight", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: 20px;
  --max: 1240px;
  --read: 720px;
  --radius: 4px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131211;
    --surface: #1d1b19;
    --surface-2: #272421;
    --ink: #f0ece5;
    --ink-2: #c9c2b8;
    --muted: #968d82;
    --line: rgba(240, 236, 229, 0.12);
    --accent: #e0707f;
    --accent-hover: #ec8c99;
    --accent-soft: rgba(224, 112, 127, 0.1);
    --on-accent: #1a0b0e;
    --nav-bg: rgba(19, 18, 17, 0.82);
    --band-bg: #1c1a18;
    --band-ink: #f0ece5;
    --band-muted: rgba(240, 236, 229, 0.55);
    --band-soft: rgba(240, 236, 229, 0.72);
    --band-line: rgba(240, 236, 229, 0.12);
    --band-accent: #e8a1ab;
    --grain-o: 0.17;
    --vignette: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #131211;
  --surface: #1d1b19;
  --surface-2: #272421;
  --ink: #f0ece5;
  --ink-2: #c9c2b8;
  --muted: #968d82;
  --line: rgba(240, 236, 229, 0.12);
  --accent: #e0707f;
  --accent-hover: #ec8c99;
  --accent-soft: rgba(224, 112, 127, 0.1);
  --on-accent: #1a0b0e;
  --nav-bg: rgba(19, 18, 17, 0.82);
  --band-bg: #1c1a18;
  --band-ink: #f0ece5;
  --band-muted: rgba(240, 236, 229, 0.55);
  --band-soft: rgba(240, 236, 229, 0.72);
  --band-line: rgba(240, 236, 229, 0.12);
  --band-accent: #e8a1ab;
  --grain-o: 0.24;
  --vignette: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s;
}

.theme-toggle:hover {
  border-color: var(--ink);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle .i-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .i-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .i-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .i-moon {
    display: none;
  }
}

body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: var(--grain-o);
  mix-blend-mode: overlay;
}

body::after {
  background: radial-gradient(
    ellipse 120% 90% at 50% 40%,
    transparent 55%,
    var(--vignette) 100%
  );
}

@media print {
  body::before,
  body::after {
    display: none;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}