/*
 * Design Tokens — MvO Energy Services
 * ----------------------------------------
 * Waarden komen 1:1 uit het goedgekeurde ontwerp
 * (docs/design/mvo-webshop-ontwerp v2.html). Refereer in componenten altijd
 * naar var(--...); voeg nieuwe tokens hier toe, niet inline.
 */

:root {

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

  /* Merk — blauw */
  --color-primary:        #0061ae;   /* --blue */
  --color-primary-dark:   #004a87;   /* --blue-dk — hovers */
  --color-primary-soft:   #eaf2fb;   /* --blue-soft — lichte vlakken/tags */

  /* Merk — groen (actie/CTA) */
  --color-accent:         #00a850;   /* --green */
  --color-accent-dark:    #008a42;   /* --green-dk — hover */
  --color-accent-soft:    #e4f6ec;   /* --green-soft — lichte vlakken */

  /* Donker */
  --color-navy:           #000333;   /* --navy — hero, CTA-band, footer */
  --color-navy-2:         #0a1450;   /* --navy-2 — verloop/tweede navy */

  /* Signaal */
  --color-amber:          #e6920f;   /* --amber — "op aanvraag"-stip e.d. */

  /* Conditie-signalen (brief §4) — stip-kleuren in de badge */
  --color-conditie-nieuw:        var(--color-accent);   /* Nieuw = groen */
  --color-conditie-gereviseerd:  var(--color-primary);  /* Gereviseerd = blauw */
  --color-conditie-gebruikt:     #93a0ad;               /* Gebruikt = grijs */

  /* Achtergronden */
  --color-bg-white:      #ffffff;             /* --panel */
  --color-bg-light:      #f4f6f9;             /* --bg — lichte secties */
  --color-bg-chrome:     #f7f9fb;             /* --chrome — inputs/subtiel */
  --color-bg-dark:       rgba(0, 3, 51, 0.72); /* navy-overlay op hero-beeld */

  /* Tekst */
  --color-text-body:     #101d2c;   /* --ink */
  --color-text-heading:  #101d2c;   /* --ink */
  --color-text-light:    #ffffff;
  --color-text-nav:      #ffffff;
  --color-text-muted:    #5d6b7a;   /* --muted */
  --color-text-muted-2:  #93a0ad;   /* --muted-2 */

  /* Borders / lijnen */
  --color-border:        #e8ecf1;             /* --line */
  --color-border-2:      #dde3ea;             /* --line-2 */
  --color-border-light:  rgba(16, 33, 54, 0.08);

  /* ============================================
   * TYPOGRAFIE — Montserrat
   * ============================================ */

  --font-heading:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:       'Montserrat', 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-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* ============================================
   * 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-32:    128px;

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

  --container-max:        1300px;   /* --maxw */
  --section-padding-y:    80px;
  --section-padding-x:    24px;

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

  --shadow-xs:    0 1px 2px rgba(16, 33, 54, 0.05);   /* --sh-xs */
  --shadow-sm:    0 2px 8px rgba(16, 33, 54, 0.06);   /* --sh-sm */
  --shadow-md:    0 6px 24px rgba(16, 33, 54, 0.07);  /* --sh */
  --shadow-lg:    0 18px 50px rgba(8, 18, 40, 0.14);  /* --sh-lg */

  --radius-none:  0;
  --radius-sm:    8px;    /* --r-sm */
  --radius-md:    10px;   /* --r-md */
  --radius-lg:    14px;   /* --r */
  --radius-full:  9999px;

  --ease:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-fast: 0.15s var(--ease);
  --transition-base: 0.3s var(--ease);

  /* ============================================
   * ONTWERP-ALIASSEN
   * Korte namen uit het goedgekeurde ontwerp (docs/design), gekoppeld aan de
   * semantische tokens hierboven. Zo gebruikt shop.css de ontwerp-CSS 1:1.
   * ============================================ */

  --blue:      var(--color-primary);
  --blue-dk:   var(--color-primary-dark);
  --blue-soft: var(--color-primary-soft);
  --green:     var(--color-accent);
  --green-dk:  var(--color-accent-dark);
  --green-soft: var(--color-accent-soft);
  --navy:      var(--color-navy);
  --navy-2:    var(--color-navy-2);
  --amber:     var(--color-amber);
  --ink:       var(--color-text-body);
  --muted:     var(--color-text-muted);
  --muted-2:   var(--color-text-muted-2);
  --line:      var(--color-border);
  --line-2:    var(--color-border-2);
  --bg:        var(--color-bg-light);
  --panel:     var(--color-bg-white);
  --chrome:    var(--color-bg-chrome);
  --r:         var(--radius-lg);
  --r-md:      var(--radius-md);
  --r-sm:      var(--radius-sm);
  --maxw:      var(--container-max);
  --sh-xs:     var(--shadow-xs);
  --sh-sm:     var(--shadow-sm);
  --sh:        var(--shadow-md);
  --sh-lg:     var(--shadow-lg);
}