/* tokens.css — design-tokens voor Zannn's AI
   Bron van waarheid voor de visuele stijl. Wijzig hier = hele site verandert mee.
   Sfeer: rustig & warm. Accent: pruim (lab-neutraal). */

:root {
  /* Accent — pruim */
  --acc: #7D3A5D;
  --acc-strong: #5A2742;
  --acc-soft: #F3E6EC;
  --acc-contrast: #FFFFFF;

  /* Warme neutrals */
  --bg: #FBF8F4;
  --surface: #FFFFFF;
  --surface-2: #F1ECE4;
  --text: #2C2C2A;
  --text-muted: #5F5E5A;
  --text-hint: #8A847A;
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.20);

  /* Typografie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: 2.75rem;
  --fs-h1: 2.25rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.2;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Spacing (4px-schaal) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Layout */
  --max-w: 1080px;
  --content-w: 720px;
}

/* Minimale basis — uitbreiden bij het bouwen van de pagina */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--text);
}

a { color: var(--acc-strong); }

.btn-primary {
  background: var(--acc);
  color: var(--acc-contrast);
  border: none;
  border-radius: var(--r-md);
  padding: 12px 20px;
  font: var(--fw-medium) var(--fs-body) var(--font-sans);
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  color: var(--acc);
  border: 1px solid var(--acc);
  border-radius: var(--r-md);
  padding: 12px 20px;
  font: var(--fw-medium) var(--fs-body) var(--font-sans);
  cursor: pointer;
}