/* ============================================================
   MatchMatters — Color tokens
   Exact values read from the live site (matchmatters.nl).
   Sharp, flat color planes — no gradients.
   ============================================================ */

:root {
  /* ---- Base palette ---------------------------------------- */
  --mm-petrol:        #022733; /* primary dark — hero, footer, dark sections */
  --mm-petrol-deep:   #072F45; /* petrol variant — text on lime, accents     */
  --mm-petrol-hover:  #0A3A4A; /* lighter petrol for hover on dark buttons    */

  --mm-mint:          #81C7B2; /* primary accent / CTA — buttons, stat boxes  */
  --mm-mint-hover:    #6FB9A2; /* darker mint for hover                       */
  --mm-mint-soft:     #B6DDD2; /* tint for tracks / subtle fills              */

  --mm-lime:          #DFE37F; /* secondary accent — reviews, tertiary CTA    */
  --mm-lime-hover:    #D3D86A; /* darker lime for hover                       */

  --mm-grey-bg:       #E9E9E9; /* page background                             */
  --mm-grey-card:     #CCD1D9; /* role / vacancy cards                        */
  --mm-grey-track:    #D5D8DD; /* salary-bar track on grey                    */
  --mm-grey-line:     #C2C6CC; /* hairline dividers on light                  */
  --mm-cream:         #FAF7EC; /* subtle warm-yellow tint for white sections (Koen ronde 4) */

  --mm-ink:           #2B2B33; /* body text, links                           */
  --mm-ink-soft:      #56565F; /* muted body text                            */
  --mm-black:         #0B2B36; /* headings on light — donkerblauw ipv zwart (Koen ronde 4) */
  --mm-heading-light: #F2F2F2; /* headings on petrol                         */
  --mm-on-dark-soft:  #B9C4C9; /* muted text on petrol                       */
  --mm-white:         #FFFFFF; /* white sections, cards                      */

  --mm-whatsapp:      #0E7C5C; /* deep WhatsApp green - AA contrast met witte tekst */
  --mm-whatsapp-hover:#0C6B50;

  /* ---- Semantic surfaces (the section-rhythm) -------------- */
  --surface-page:     var(--mm-grey-bg);
  --surface-white:    var(--mm-white);
  --surface-dark:     var(--mm-petrol);
  --surface-card:     var(--mm-grey-card);
  --surface-stat:     var(--mm-mint);   /* "in cijfers" stat blocks */
  --surface-review:   var(--mm-lime);   /* review / testimonial band */

  /* ---- Semantic text -------------------------------------- */
  --text-body:        var(--mm-ink);
  --text-muted:       var(--mm-ink-soft);
  --text-heading:     var(--mm-black);
  --text-on-dark:     var(--mm-heading-light);
  --text-on-dark-muted: var(--mm-on-dark-soft);
  --text-on-accent:   var(--mm-petrol-deep);   /* text on mint / lime */
  --text-link:        var(--mm-ink);

  /* ---- Actions -------------------------------------------- */
  --cta-bg:           var(--mm-mint);
  --cta-bg-hover:     var(--mm-mint-hover);
  --cta-text:         var(--mm-petrol);
  --cta-secondary-bg: var(--mm-petrol);
  --cta-secondary-text: var(--mm-heading-light);
  --cta-tertiary-bg:  var(--mm-lime);
  --cta-tertiary-text: var(--mm-petrol-deep);

  --accent:           var(--mm-mint);
  --accent-secondary: var(--mm-lime);

  /* ---- Lines & focus -------------------------------------- */
  --border-on-light:  var(--mm-grey-line);
  --border-on-dark:   rgba(255, 255, 255, 0.16);
  --focus-ring:       var(--mm-mint);
}