/*
 * Design Tokens — Marion Masseur
 */

:root {

  /* ============================================
   * KLEUREN
   * ============================================ */

  --color-bg:            #484c4e;
  --color-bg-header:     #3c4042;
  --color-bg-footer:     #363a3c;
  --color-bg-legal:      #404446;

  --color-text:          #e8e4de;
  --color-text-muted:    #aaa8a2;
  --color-text-light:    #f5f2ee;

  --color-accent:        #c8bfb0;
  --color-nav:           #b8b0a4;
  --color-nav-hover:     #eee8e0;
  --color-nav-active:    #ffffff;

  --color-border:        #565a5c;
  --color-caption:       #787470;

  /* Alias tokens (legacy compat) */
  --color-text-body:     var(--color-text);
  --color-text-heading:  var(--color-text-light);
  --color-text-nav:      var(--color-nav);
  --color-bg-white:      var(--color-bg);
  --color-border-light:  var(--color-border);
  --color-primary:       var(--color-accent);
  --color-primary-dark:  var(--color-text-light);

  /* ============================================
   * TYPOGRAFIE
   * ============================================ */

  --font-heading:    'Raleway', system-ui, -apple-system, sans-serif;
  --font-title:      var(--font-heading);
  --font-body:       'Lato', system-ui, -apple-system, sans-serif;

  --font-light:      300;
  --font-thin:       200;
  --font-regular:    400;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  --text-xxs:    0.65rem;
  --text-xs:     0.72rem;
  --text-sm:     0.75rem;
  --text-base:   1rem;
  --text-md:     1.02rem;
  --text-lg:     1.1rem;
  --text-xl:     1.3rem;
  --text-2xl:    1.6rem;
  --text-3xl:    2rem;

  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.75;
  --leading-loose:    1.85;

  --tracking-tight:   0.04em;
  --tracking-normal:  0.06em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.14em;

  /* ============================================
   * SPACING
   * ============================================ */

  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-16:    64px;
  --space-20:    80px;

  /* ============================================
   * LAYOUT
   * ============================================ */

  --container-max:     1020px;
  --nav-height:        44px;
  --section-padding-y: 48px;
  --section-padding-x: 24px;

  /* ============================================
   * EFFECTEN
   * ============================================ */

  --radius-sm:    2px;
  --radius-md:    4px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;
}