/* ============================================================
   nocturne.css  —  Semantica "Nocturne" donker thema
   ------------------------------------------------------------
   Laad dit bestand ALS LAATSTE, ná je bestaande stylesheet:

       <link rel="stylesheet" href="/css/styles.css">
       <link rel="stylesheet" href="/css/nocturne.css">   <-- nieuw

   • 100% additief en omkeerbaar: verwijder de regel hierboven
     en de site is exact terug bij het oude (lichte) thema.
   • Geen enkele HTML-wijziging nodig. De "extra" decoratie
     (gloed, grid) komt uit CSS-pseudo-elementen.
   • De kern is stap 1: omdat styles.css alles via CSS-variabelen
     opbouwt, herthemed één set variabelen de hele site in één keer.
   ============================================================ */


/* ============================================================
   1 · KERN — kantel het palet naar donker
   ============================================================ */
:root{
  --paper:oklch(14.2% 0.033 248);                /* basis-achtergrond (was ivoor) */
  --paper-2:oklch(19.1% 0.036 248);               /* kaarten / panelen             */
  --band:oklch(10.9% 0.026 248);                  /* zachte sectie-band            */
  --ink:oklch(93.7% 0.018 84);                    /* primaire tekst (warm crème)   */
  --ink-soft:oklch(74.2% 0.019 238);              /* secundaire tekst              */
  --ink-faint:oklch(58.3% 0.027 237);             /* gedempte tekst / labels       */
  --line:oklch(100% 0 0 / .12);                   /* hairlines                     */
  --line-hover:oklch(100% 0 0 / .24);

  /* --accent:oklch(56% 0.177 34);                   /* brick-rood, iets feller voor donker */
  /* --accent-deep:oklch(48% 0.165 37);              /* merk-brick                    */
  --accent-wash:oklch(56% 0.177 34 / .14);
  --accent-line:oklch(56% 0.177 34 / .34);
  --accent-line-2:oklch(56% 0.177 34 / .46);

  --cream:oklch(93.7% 0.018 84);
  --cream-muted:oklch(74.2% 0.019 238);

  --shadow-nav:0 1px 2px oklch(0% 0 0 / .45), 0 18px 40px -24px oklch(0% 0 0 / .72);
  --shadow-menu:0 14px 30px -8px oklch(0% 0 0 / .6);
  --shadow-panel:0 2px 6px oklch(0% 0 0 / .35), 0 50px 90px -55px oklch(0% 0 0 / .85);
  --shadow-lift:0 30px 60px -38px oklch(0% 0 0 / .78);
  --shadow-lift-soft:0 30px 60px -46px oklch(0% 0 0 / .72);
  --cal-bg:010a16;
  --cal-text:f0e9dd;
  --cal-primary:c63f21;
}

body{ background:var(--paper); color:var(--ink); }
::selection{ background:var(--accent); color:oklch(100% 0 0); }

/* ============================================================
   2 · NOCTURNE-SIGNATUUR — monospace mini-labels
   Geeft de kleine uppercase labels het "dossier/console"-gevoel
   uit richting B.
   ============================================================ */
.sec-tag,
.eyebrow,
.case-label,
.gcap,
.stat .k,
.ph-dur,
.opt .tag,
.pip-phase-num,
.trust .label{
  font-family:'Space Mono', ui-monospace, monospace;
  letter-spacing:.14em;
}
.sec-tag{ letter-spacing:.2em; }

/* ============================================================
   3 · ZWEVENDE MENUBALK — donker glas (blijft, alleen verfijnd)
   ============================================================ */
.navbar{
  background:oklch(100% 0 0 / .06);
  border-color:oklch(100% 0 0 / .14);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
}
nav.links a:hover,
nav.links a.active{ background:oklch(100% 0 0 / .10); color:var(--ink); }
.hamburger:hover{ background:oklch(100% 0 0 / .10); }
.mobile-menu{ background:oklch(16.9% 0.030 248); }
.mobile-links a:hover,
.mobile-links a.active{ background:oklch(100% 0 0 / .08); color:var(--ink); }

/* Je logo bevat donkere lijnen → die verdwijnen op donker.
   Lever bij voorkeur een lichte ("knockout") versie aan.
   Tijdelijke noodgreep (let op: kleurt óók het rode ruitje wit):
   .brand-logo{ filter:brightness(0) invert(1); }  */

/* ============================================================
   4 · HERO — premium donkere sfeer (gloed + subtiel grid)
   Beide lagen zijn CSS-pseudo-elementen: geen HTML nodig.
   ============================================================ */
.hero{
  /* warme rode gloed, rechtsboven — verplaatst naar het element zelf,
     zodat BEIDE pseudo's vrijkomen voor het grid én het tijdcijfer */
  /* background:radial-gradient(820px 460px at 88% -8%, oklch(56% 0.177 34 / .22), transparent 60%); */
}
.hero::before{ color:oklch(73.7% 0.018 84 / .11); }   /* ghost-tijdcijfer: lichte kleur op donker */
.hero::after{                  /* heel subtiel hairline-grid voor diepte */
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(oklch(100% 0 0 / .035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .035) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask:radial-gradient(720px 520px at 68% 22%, #000, transparent 76%);
          mask:radial-gradient(720px 520px at 68% 22%, #000, transparent 76%);
}
/* hero-pill (eyebrow) — mono + ingetogen op donker */
.eyebrow{
  font-family:'Space Mono', monospace;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--accent);
  background:rgba(218,87,64,.10);
  border-color:var(--accent-line);
}
.tijdsgevoel{ color:var(--ink-soft); }
.hero h1 em,
.phero h1 em,
.shero h1 em{ color:var(--accent); }

/* vertrouwens-logo's iets ingetogener op donker */
.logos{ opacity:.5; }

/* ============================================================
   5 · PANELEN, STATUSSEN & TIJDLIJN op donker
   (de meeste kaarten erven al via de variabelen)
   ============================================================ */
.panel-top .tdot{ background:oklch(100% 0 0 / .18); }
.st-map{ background:oklch(100% 0 0 / .07); color:var(--ink-soft); }
.st-go{ background:var(--accent-wash); color:oklch(75% 0.096 33); }
.st-done{ background:oklch(66.8% 0.083 142 / .16); color:oklch(80.1% 0.080 142); }
.dot-done{ background:oklch(58.8% 0.069 143); }
.gbar.b-done{ background:oklch(51.8% 0.065 143); }
.gbar.b-plan{ background:oklch(100% 0 0 / .05); border:1px dashed oklch(100% 0 0 / .24); }

/* ============================================================
   6 · DONKERE CTA-BAND — terug naar donker + gloed
   (in styles.css was de band var(--ink); die is nu juist licht,
    dus hier expliciet weer donker maken)
   ============================================================ */
.cta-band{
  background:linear-gradient(180deg,oklch(18.7% 0.033 248),oklch(13.9% 0.030 248));
  border:1px solid oklch(100% 0 0 / .10);
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(640px 320deg at 50% -25%, oklch(56% 0.177 34 / .24), transparent 60%);
}
.cta-band h2{ color:oklch(100% 0 0); }
.cta-band p{ color:var(--cream-muted); }
.cta-band .btn-light{ background:var(--cream); color:oklch(14.2% 0.033 248); }
.cta-band .btn-light:hover{ background:oklch(100% 0 0); }
.cta-band .btn-line{ color:var(--cream); border-color:oklch(93.7% 0.018 84 / .30); }
.cta-band .btn-line:hover{ border-color:oklch(93.7% 0.018 84 / .62); }

/* ============================================================
   7 · FORMULIEREN — verwijder hardgecodeerde witte vlakken
   ============================================================ */
.precheck textarea:focus,
.precheck input[type="email"]:focus{ background:var(--paper-2); }
.precheck-choice:hover,
.precheck-choice:focus-visible{ background:var(--accent-wash); color:oklch(75% 0.096 33); }

/* ============================================================
   8 · DETAILS — koppen, FAQ, citaat blijven via variabelen goed;
   hier alleen kleine leesbaarheidsfinetuning.
   ============================================================ */
.statement{ border-top-color:var(--accent); }
.faq summary:hover,
.faq details[open] summary{ color:oklch(75% 0.096 33); }
.hero-404::before{ color:oklch(73.7% 0.018 84 / .11); }