/* ===================================================
   ERFGO3D – Design Tokens
   Alle kleuren, spacing, typografie, animatie-waarden
   Geen hardcoded waarden buiten dit bestand.
   =================================================== */

:root {
  /* ---- LICHT-THEMA ---- */
  --color-paper: #f5f2ec;
  --color-paper-soft: #efeae2;
  --color-ink: #013a3a;
  --color-ink-deep: #004d4e;
  --color-line: rgba(1, 58, 58, 0.12);

  /* ---- DONKER-THEMA ---- */
  --color-dark-ink: #ffffff;
  --color-dark-line: rgba(255, 255, 255, 0.18);

  /* ---- BRAND-KLEUREN ---- */
  --color-brand: #01a28c;
  --color-brand-deep: #004d4e;
  --color-brand-light: #6ceb83;

  /* ---- UTILITY ---- */
  --color-white: #ffffff;

  /* ---- BREAKPOINTS (referentie, niet bruikbaar in media queries rechtstreeks) ---- */
  /* --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; */

  /* ---- SPACING ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: 6rem;
  --s-9: 8rem;
  --s-10: 12rem;

  /* ---- TYPOGRAFIE ---- */
  --t-tiny:    clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --t-small:   clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --t-body:    clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  --t-lead:    clamp(1.25rem, 1rem + 1vw, 1.625rem);
  --t-h3:      clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --t-h2:      clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --t-h1:      clamp(2.75rem, 2rem + 4vw, 5.5rem);
  --t-display: clamp(3.5rem, 2.5rem + 6vw, 9rem);

  /* ---- RADII ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---- ANIMATIE ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short: 200ms;
  --dur-medium: 500ms;
  --dur-long: 900ms;

  /* ---- GRID ---- */
  --grid-gutter: 24px;
  --outer-padding: clamp(24px, 4vw, 80px);

  /* ---- HEADER ---- */
  --header-height: 72px;
}