/**
 * @file _tokens.css
 * Design tokens voor nebula — importeer dit bestand in je thema's
 * hoofdstijl zodat alle componenten de variabelen kunnen gebruiken.
 *
 * Overschrijf variabelen in je eigen thema-CSS om het design aan te passen
 * zonder de componentbestanden te hoeven wijzigen.
 */

:root {
  /* ─── Kleuren ─────────────────────────────────────────── */
  --nnn-color-primary:        #0066cc;
  --nnn-color-primary-hover:  #0052a3;
  --nnn-color-secondary:      #444444;
  --nnn-color-text:           #1a1a1a;
  --nnn-color-text-muted:     #666666;
  --nnn-color-background:     #ffffff;
  --nnn-color-background-alt: #f5f5f5;
  --nnn-color-border:         #e0e0e0;
  --nnn-color-white:          #ffffff;
  --nnn-color-overlay:        rgba(0, 0, 0, 0.45);

  /* ─── Spacing ─────────────────────────────────────────── */
  --nnn-space-xs:   0.25rem;   /*  4px */
  --nnn-space-sm:   0.5rem;    /*  8px */
  --nnn-space-md:   1rem;      /* 16px */
  --nnn-space-lg:   1.5rem;    /* 24px */
  --nnn-space-xl:   2.5rem;    /* 40px */
  --nnn-space-xxl:  4rem;      /* 64px */

  /* ─── Container breedtes ──────────────────────────────── */
  --nnn-container-narrow: 720px;
  --nnn-container-normal: 1080px;
  --nnn-container-wide:   1400px;

  /* ─── Border radius ───────────────────────────────────── */
  --nnn-radius-sm: 4px;
  --nnn-radius-md: 8px;
  --nnn-radius-lg: 16px;

  /* ─── Typografie ──────────────────────────────────────── */
  --nnn-font-base:        system-ui, -apple-system, sans-serif;
  --nnn-font-size-base:   1rem;
  --nnn-line-height-base: 1.6;

  /* ─── Schaduwen ───────────────────────────────────────── */
  --nnn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10);
  --nnn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --nnn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* ─── Transities ──────────────────────────────────────── */
  --nnn-transition-fast:   0.15s ease;
  --nnn-transition-normal: 0.25s ease;
}