/* ============================================================
   ABL Visual Identity — shared design tokens & reset
   ============================================================ */

:root {
  /* Colors */
  --color-zwart:   #141414;
  --color-wit:     #FFFFFF;
  --color-paper-1: #F3F5F0;
  --color-paper-2: #EAEDE6;
  --color-paper-3: #D1D6CB;
  --color-paper-4: #74786F;

  /* Fonts (Google Fonts fallbacks; swap for ABL fonts when available) */
  --font-serif: 'Lora', 'Times New Roman', Georgia, serif;
  --font-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (fluid, desktop max from Figma) */
  --text-title:    clamp(48px, 9vw, 120px);
  --text-display:  clamp(40px, 6vw, 80px);
  --text-h2:       clamp(32px, 4vw, 56px);
  --text-h3:       clamp(24px, 2.6vw, 36px);
  --text-body-1:   clamp(20px, 1.8vw, 28px);
  --text-body-2:   clamp(18px, 1.4vw, 20px);
  --text-body-3:   18px;
  --text-meta:     14px;
  --text-meta-lg:  16px;

  /* Spacing */
  --space-page-x:  clamp(20px, 5vw, 80px);
  --space-section: clamp(64px, 10vw, 160px);
  --space-block:   clamp(32px, 5vw, 64px);

  /* Layout */
  --max-content: 1760px;
  --max-text:    760px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper-1);
  color: var(--color-zwart);
  font-family: var(--font-sans);
  font-size: var(--text-body-3);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; letter-spacing: -0.03em; }

::selection { background: var(--color-zwart); color: var(--color-paper-1); }