/*
 * Design Tokens — Fijnmetaal (RAMS)
 * ----------------------------------------
 * Merk-tokens staan bovenaan (bron van waarheid). De generieke
 * tokennamen daaronder zijn aliassen zodat typografie/componenten en
 * toekomstige pagina's dezelfde variabelen kunnen blijven gebruiken.
 *
 * Brand: #00204D navy · #EE6A18 ember · #080F18 ink
 */

:root {

  /* ============================================
   * MERK-PALET  (bron)
   * ============================================ */

  --ink:          #080F18;   /* diepste donker — hero, footer */
  --ink-2:        #0C1626;   /* donkere kaart-vulling */
  --navy:         #00204D;   /* merk-navy — koppen, accenten */
  --navy-2:       #0A3A78;   /* lichtere navy — hover/gradient */
  --ember:        #EE6A18;   /* actie-kleur — buttons, CTA */
  --ember-2:      #D75C10;   /* ember hover */

  --paper:        #FFFFFF;   /* wit */
  --fog:          #F4F7FB;   /* lichte secties */
  --concrete:     #E7ECF3;   /* iets donkerder licht vlak */
  --steel:        #5B6B82;   /* gedempte tekst op licht */

  --line-light:   #D9E0EA;             /* rand op licht */
  --line-dark:    rgba(255,255,255,.14); /* rand op donker */

  /* ============================================
   * KLEUREN — generieke aliassen
   * ============================================ */

  /* Merk */
  --color-primary:       var(--navy);
  --color-primary-dark:  #001636;
  --color-accent:        var(--ember);

  /* Achtergronden */
  --color-bg-white:      var(--paper);
  --color-bg-light:      var(--fog);
  --color-bg-dark:       var(--ink);

  /* Tekst */
  --color-text-body:     var(--ink);
  --color-text-heading:  var(--ink);
  --color-text-light:    #FFFFFF;
  --color-text-nav:      rgba(255,255,255,.82);
  --color-text-muted:    var(--steel);

  /* Borders */
  --color-border:        var(--line-light);
  --color-border-light:  var(--line-dark);

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

  --font-heading:    'Saira Condensed', 'Inter', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;

  /* Weights */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  /* Sizes */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    64px;

  /* Line heights */
  --leading-none:     1;
  --leading-display:  0.98;   /* condensed display-koppen */
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.2em;

  /* ============================================
   * SPACING — 4px schaal
   * ============================================ */

  --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;
  --space-24:    96px;
  --space-26:    104px;
  --space-32:    128px;

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

  --container-max:        1200px;
  --container-pad:        28px;
  --section-padding-y:    104px;
  --section-padding-x:    var(--container-pad);

  /* ============================================
   * VORM & EFFECTEN
   * ============================================ */

  --shear:        18px;   /* schuine hoek-cut die door de hele site loopt */

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-card:  0 24px 50px -28px rgba(0, 32, 77, 0.5);

  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-full:  9999px;

  --ease:            cubic-bezier(.22,.61,.36,1);
  --transition-fast: 0.2s var(--ease);
  --transition-base: 0.3s var(--ease);
}