/* ===== Design Tokens ===== */
:root {
  /* Palette — institutional navy + Dutch orange */
  --color-primary: #1a2332;
  --color-primary-medium: #2a3a52;
  --color-primary-light: #3d526e;
  --color-accent: #E85D26;
  --color-accent-hover: #d14e1a;
  --color-accent-soft: #fef0eb;

  --color-green: #1a7a42;
  --color-green-bg: #eef7f1;
  --color-green-border: #6bc68e;
  --color-green-glow: rgba(26, 122, 66, 0.12);
  --color-orange: #c96218;
  --color-orange-bg: #fef5ec;
  --color-orange-border: #e8a96a;
  --color-orange-glow: rgba(201, 98, 24, 0.12);
  --color-red: #b91c2e;
  --color-red-bg: #fdf0f1;
  --color-red-border: #e47982;
  --color-red-glow: rgba(185, 28, 46, 0.12);

  --color-bg: #f6f3ee;
  --color-bg-warm: #ede8e0;
  --color-surface: #fffdf9;
  --color-surface-elevated: #ffffff;
  --color-text: #1a2332;
  --color-text-secondary: #556274;
  --color-text-tertiary: #8895a7;
  --color-border: #ddd6cb;
  --color-border-light: #ebe7e0;

  /* Typography */
  --font-heading: 'Bricolage Grotesque', 'Georgia', serif;
  --font-body: 'Source Serif 4', 'Georgia', serif;
  --font-mono: 'DM Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* Shadows — warm-toned */
  --shadow-sm: 0 1px 2px rgba(26, 35, 50, 0.06);
  --shadow-md: 0 2px 8px rgba(26, 35, 50, 0.08), 0 1px 2px rgba(26, 35, 50, 0.04);
  --shadow-lg: 0 8px 24px rgba(26, 35, 50, 0.1), 0 2px 6px rgba(26, 35, 50, 0.04);
  --shadow-xl: 0 16px 48px rgba(26, 35, 50, 0.12), 0 4px 12px rgba(26, 35, 50, 0.06);
  --shadow-glow-accent: 0 4px 20px rgba(232, 93, 38, 0.2), 0 2px 6px rgba(232, 93, 38, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* Layout */
  --max-width: 680px;
  --max-width-wide: 960px;
  --header-height: 72px;
}

/* ===== Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ===== Utility ===== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.container--wide {
  max-width: var(--max-width-wide);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Staggered reveal animations ===== */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gaugeGrow {
  from { stroke-dashoffset: 282.74; }
}

.reveal {
  animation: revealUp var(--dur-slow) var(--ease-out) both;
}

.reveal-delay-1 { animation-delay: 100ms; }
.reveal-delay-2 { animation-delay: 200ms; }
.reveal-delay-3 { animation-delay: 300ms; }
.reveal-delay-4 { animation-delay: 400ms; }
.reveal-delay-5 { animation-delay: 500ms; }
.reveal-delay-6 { animation-delay: 600ms; }