/* ============================================================
 *  FILE:  /<funnel>/assets/css/base.css
 *  ROLE:  Gedeeld design-system voor BEIDE pagina's
 *         (tokens, reset, typografie-basis, nav, footer, container, animaties)
 *  USED BY:  /<funnel>/index.php  en  /<funnel>/dankjewel/index.php
 *
 *  Theme-overrides (merkkleuren uit config.theme) worden inline in de <head>
 *  van elke pagina ingevoegd ná dit bestand, en overschrijven de defaults
 *  hieronder via CSS custom properties.
 * ============================================================ */

/* ============ DESIGN TOKENS ============ */
:root {
  /* Palette: warm cream + deep midnight + soft brand accent */
  --cream:       #FAF7F2;
  --cream-warm:  #F4EFE6;
  --cream-deep:  #EBE3D4;
  --ink:         #0E1726;
  --ink-soft:    #2A3140;
  --ink-mute:    #5A6172;
  --paper:       #FFFFFF;
  --line:        #E5DDD0;

  /* Brand (defaults — overschreven door config.theme) */
  --brand:       #534AB7;
  --brand-soft:  #EFECFB;
  --brand-deep:  #3A327F;
  --gold:        #C8A664;
  --gold-soft:   #F1E8D2;
  --accent:      #EB264C;
  --accent-deep: #C71B3F;

  /* Status (success states, e.g. dankjewel page) */
  --green:       #2E8B5A;
  --green-soft:  #E8F5EE;

  /* Type */
  --serif: 'Fraunces', 'Georgia', serif;
  --sans:  'Geist', -apple-system, system-ui, sans-serif;

  /* Spacing */
  --max-w:   1180px;
  --gutter:  clamp(20px, 4vw, 48px);
  --radius:     18px;
  --radius-lg:  28px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(14, 23, 38, .06), 0 1px 2px rgba(14, 23, 38, .04);
  --shadow:    0 10px 40px -12px rgba(14, 23, 38, .18), 0 4px 16px -8px rgba(14, 23, 38, .08);
  --shadow-lg: 0 30px 80px -20px rgba(14, 23, 38, .25), 0 12px 32px -12px rgba(14, 23, 38, .12);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img    { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a      { color: inherit; text-decoration: none; }

/* Subtle grain overlay on everything cream */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ TYPOGRAPHY (basis, sizes per pagina) ============ */
.serif  { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.italic { font-style: italic; font-variation-settings: 'SOFT' 100; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--brand);
}

/* ============ LAYOUT ============ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 2;
}
section { position: relative; z-index: 2; }

/* ============ NAV (gedeelde structuur) ============ */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 24px 0;
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: 'opsz' 36;
}
.logo-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ============ FOOTER (donker, gedeeld) ============ */
.footer {
  background: var(--ink);
  color: rgba(250, 247, 242, .5);
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  border-top: 1px solid rgba(250, 247, 242, .08);
}
.footer a        { color: rgba(250, 247, 242, .7); }
.footer a:hover  { color: var(--gold); }
.footer-row      { display: flex; justify-content: center; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }

/* ============ GEDEELDE ANIMATIES ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.5); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}