/* Mastrent design tokens — waarden uit het goedgekeurde ontwerp (futuristisch-v6).
   Donker is altijd de standaard (klant 2026-10-22): de donkere tokens gelden voor alles behalve
   data-theme="light", dus ook zonder JS en ongeacht de systeemvoorkeur. Licht alleen via de wisselknop
   (keuze in localStorage); het inline head-script zet data-theme vóór de eerste paint. */

:root{
  /* vast, beide thema's */
  --mr-navy:#0d3880; --mr-navy-2:#1b3d8f; --mr-navy-dark:#0a2c66; --mr-geel:#fecc00; --mr-on-geel:#0a1838; --mr-rood:#e30613; --mr-ok:#2fd36b;
  --mr-font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mr-font-body:Manrope, ui-sans-serif, system-ui, sans-serif;
  --mr-r-s:12px; --mr-r-m:18px; --mr-r-l:26px;
  --mr-ease:cubic-bezier(.2,.8,.2,1); --mr-ease-out:cubic-bezier(.16,1,.3,1);
  --mr-cta-band:linear-gradient(120deg, rgba(16,52,124,.97), rgba(6,22,62,.98));
  /* tekst op navy (CTA-band, uitgelichte kaart, tabelkop): in beide thema's licht */
  --mr-wit:#ffffff; --mr-op-navy:#eef2fb; --mr-op-navy-2:#c9d3ec; --mr-op-navy-3:#aab6d6;
  --mr-geel-donker:#d9a900; --mr-geel-hover:#ffd633;
  --mr-geel-schaduw:rgba(254,204,0,.7); --mr-geel-schaduw-sterk:rgba(254,204,0,.85); --mr-geel-zacht:rgba(254,204,0,.12);
  --mr-backdrop:rgba(2,5,14,.62);
}

:root[data-theme="light"]{
  color-scheme:light;
  --mr-bg:#f3f5fa; --mr-bg-2:#e6ebf5;
  --mr-surface:#ffffff; --mr-surface-2:#eef2f9; --mr-tint:#e7eefb;
  --mr-text:#0a1838; --mr-muted:#34415e; --mr-muted-2:#56627c;
  --mr-glass:rgba(255,255,255,.64); --mr-glass-strong:rgba(255,255,255,.86);
  --mr-border:rgba(13,56,128,.12); --mr-border-2:rgba(13,56,128,.22); --mr-border-input:rgba(13,56,128,.58);
  --mr-navy:#0d3880; --mr-geel:#fecc00;
  --mr-accent:#0d3880; --mr-on-accent:#ffffff; --mr-focus:#0d3880;
  --mr-glow:rgba(254,204,0,.22);
  --mr-shadow:0 24px 60px -28px rgba(13,40,100,.30), 0 2px 6px rgba(13,40,100,.05);
  --mr-hair-a:rgba(255,255,255,.95); --mr-hair-b:rgba(13,56,128,.10); --mr-hair-c:rgba(254,204,0,.75);
  --mr-grain:.035;
  --mr-fout:#b32d2e; --mr-fout-bg:#fdf0f0;
  /* telefoon (mobiel.css): kop- en actiebalk, donkere fotovlakken */
  --mr-kopbalk:#0a1838; --mr-balk:#ffffff; --mr-foto-bg:#06102a; --mr-chip-bg:#ffffff; --mr-sectie-alt:#ffffff;
  --mr-kaart-basis:rgba(13,56,128,.06); --mr-kaart-rand:rgba(13,56,128,.3); --mr-kaart-aan:#0d3880; --mr-kaart-gloed:rgba(13,56,128,.25);
  --mr-font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mr-font-body:Manrope, ui-sans-serif, system-ui, sans-serif;
}

/* :root los erbij: ook waar data-theme niet bestaat (zoals de editor) gelden de donkere tokens. */
:root,
:root:not([data-theme="light"]){
  color-scheme:dark;
  --mr-bg:#050913; --mr-bg-2:#0a1430;
  --mr-surface:#0b1430; --mr-surface-2:#0e1a3a; --mr-tint:#13234a;
  --mr-text:#eef2fb; --mr-muted:#b9c3da; --mr-muted-2:#8c98b4;
  --mr-glass:rgba(16,26,56,.46); --mr-glass-strong:rgba(12,20,44,.82);
  --mr-border:rgba(160,185,255,.12); --mr-border-2:rgba(160,185,255,.22); --mr-border-input:rgba(160,185,255,.5);
  --mr-navy:#0d3880; --mr-geel:#fecc00;
  --mr-accent:#fecc00; --mr-on-accent:#0a1838; --mr-focus:#fecc00;
  --mr-glow:rgba(254,204,0,.32);
  --mr-shadow:0 30px 80px -30px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.04) inset;
  --mr-hair-a:rgba(255,255,255,.42); --mr-hair-b:rgba(255,255,255,.04); --mr-hair-c:rgba(254,204,0,.55);
  --mr-grain:.06;
  --mr-fout:#ff7b72; --mr-fout-bg:rgba(255,90,79,.12);
  --mr-kopbalk:#06102a; --mr-balk:#06102a; --mr-foto-bg:#06102a; --mr-chip-bg:rgba(255,255,255,.06); --mr-sectie-alt:#081536;
  --mr-kaart-basis:rgba(160,185,255,.07); --mr-kaart-rand:rgba(160,185,255,.3); --mr-kaart-aan:#fecc00; --mr-kaart-gloed:rgba(254,204,0,.55);
  --mr-font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mr-font-body:Manrope, ui-sans-serif, system-ui, sans-serif;
}