/* =============================================================================
   CHALLENGECHECK — huisstijl v2.0 "Signaalblauw" van stelselmatig.nl
   =============================================================================
   De kleurwaarden hieronder zijn 1-op-1 overgenomen uit het paletblok van
   stelselmatig/css/styles.css (4 augustus 2026). Voeg hier geen eigen hexcodes
   toe: het palet is als geheel op contrast getoetst. Wijzigt de site, dan
   neem je het blok hier opnieuw over.

   Verschil met de site: geen themaknop en geen localStorage. De modus volgt
   de systeemvoorkeur (prefers-color-scheme); donker is de standaard.

   Let op (regel van de site): groen/rood (--kleur-winst/--kleur-verlies) zijn
   UITSLUITEND voor P&L-cijfers, nooit voor status.
   ========================================================================== */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/geist-variable.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geistmono-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  color-scheme: dark;

  --kleur-basis:        #0B1220;
  --kleur-surface:      #121B2E;
  --kleur-lijn:         #20304F;
  --kleur-tekst:        #EDF2FA;  /* 17,4:1 */
  --kleur-tekst-2:      #94A2BE;  /* 7,2:1 */
  --kleur-accent:       #7CA6F9;  /* 7,7:1 */
  --kleur-accent-hover: #9DBCFB;
  --kleur-knop:         #2563EB;
  --kleur-knop-hover:   #3B82F6;
  --kleur-knop-pressed: #1D4ED8;
  --kleur-knop-tekst:   #FFFFFF;
  --kleur-winst:        #3BAE7C;
  --kleur-verlies:      #E0605A;

  --kleur-tekst-rgb:   237,242,250;
  --kleur-tekst-2-rgb: 148,162,190;
  --kleur-accent-rgb:  124,166,249;

  --bg-deep: var(--kleur-basis);
  --schaduw-venster: 0 40px 120px -60px rgba(0,0,0,0.95);
  --gloed-1: rgba(var(--kleur-accent-rgb),0.15);
  --gloed-2: rgba(var(--kleur-tekst-2-rgb),0.11);
}

@supports (color: color-mix(in srgb, red, blue)){
  :root{ --bg-deep: color-mix(in srgb, var(--kleur-basis) 62%, #000); }
}

@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;

    --kleur-basis:        #FFFFFF;
    --kleur-surface:      #F4F7FC;
    --kleur-lijn:         #E2E8F4;
    --kleur-tekst:        #0B1220;  /* 18,7:1 */
    --kleur-tekst-2:      #4E5C78;  /* 6,7:1 */
    --kleur-accent:       #1D4ED8;  /* 6,7:1 */
    --kleur-accent-hover: #1E40AF;
    --kleur-knop:         #2563EB;
    --kleur-knop-hover:   #1D4ED8;
    --kleur-knop-pressed: #1E40AF;
    --kleur-knop-tekst:   #FFFFFF;
    --kleur-winst:        #177A4B;
    --kleur-verlies:      #C03939;

    --kleur-tekst-rgb:   11,18,32;
    --kleur-tekst-2-rgb: 78,92,120;
    --kleur-accent-rgb:  29,78,216;

    --bg-deep: var(--kleur-surface);
    --schaduw-venster: 0 24px 64px -44px rgba(var(--kleur-tekst-rgb),0.20);
    --gloed-1: rgba(var(--kleur-accent-rgb),0.07);
    --gloed-2: rgba(var(--kleur-tekst-2-rgb),0.05);
  }
}

:root{
  --bg:       var(--kleur-basis);
  --surface:  var(--kleur-surface);
  --ink:      var(--kleur-tekst);
  --ink-soft: var(--kleur-tekst-2);
  --line:     var(--kleur-lijn);
  --accent:   var(--kleur-accent);
  --accent-hover: var(--kleur-accent-hover);

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --logo: 'Fraunces', Georgia, serif;

  --r-frame: 24px;
  --r-card:  16px;
  --frame-max: 1320px;
  --frame-pad: clamp(20px, 3.6vw, 52px);

  --fs-h1:    clamp(34px, 2rem + 2.8vw, 62px);
  --fs-lede:  clamp(17px, 0.98rem + 0.42vw, 20px);
  --fs-body:  clamp(16px, 0.95rem + 0.2vw, 17px);
  --fs-label: clamp(12px, 0.7rem + 0.1vw, 12.5px);
  --tr-h1: -0.032em;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg-deep)}

body{
  position:relative;
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:min(900px, 95vh);
  background:
    radial-gradient(58% 62% at 50% -12%, var(--gloed-1), transparent 68%),
    radial-gradient(44% 52% at 86% 4%,  var(--gloed-2), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.wrap{
  position:relative; z-index:1;
  max-width:var(--frame-max);
  margin:14px auto 44px;
  padding:0 var(--frame-pad);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-frame);
  box-shadow:var(--schaduw-venster);
}

a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.kop{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:var(--logo); font-size:21px; font-weight:600;
  letter-spacing:-0.01em; color:var(--ink); text-decoration:none;
}
.logo span{color:var(--accent)}
.door{font-family:var(--mono); font-size:var(--fs-label); color:var(--ink-soft); letter-spacing:0.04em}

.hero{padding-block:clamp(52px, 7vw, 96px)}

.eyebrow{
  display:block; margin-bottom:22px;
  font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft);
}

h1{
  font-weight:600; font-size:var(--fs-h1); line-height:1.03;
  letter-spacing:var(--tr-h1); margin-bottom:22px; max-width:16ch;
  text-wrap:balance; overflow-wrap:normal; hyphens:none;
}

.lede{font-size:var(--fs-lede);color:var(--ink-soft);max-width:60ch;line-height:1.55}

.melding{
  margin-top:32px; max-width:60ch;
  padding:16px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}

.voet{padding:24px 0 32px;border-top:1px solid var(--line);font-size:15px}

@media (max-width:900px){
  .wrap{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:0 20px;min-height:100vh}
}
@media (max-width:430px){
  .wrap{padding:0 16px}
  .logo{font-size:17px}
}