/* SITE_DONKER (GOL-737). Appended to /styles.css and linked last, only when SITE_DONKER_AAN is "ja".
   Off: this file is not in the stylesheet and the site stays as it is.
   On, and the device asks for dark: the same warm values as the app's v3 dark tokens
   (public/app/css/tokens.css, :root[data-donker="aan"]:has(#app[data-ontwerp-v3="aan"])).
   Cream #f6efe0 on near-black #17130c is 16.2:1, #b9ad97 on it is 8.4:1, gold #f5c451 on it is 11.4:1.
   The product shots (the window, the phone, a white sheet) stay light islands, so their ink stays on white. */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --inkt: #f6efe0;
    --inkt-2: #ddd3bf;
    --inkt-zacht: #b9ad97;
    --grond: #17130c;
    --vlak: #1f1a12;
    --licht: #2b251a;
    --licht-hover: #342d20;
    --lijn: #3a3326;
    --nacht: #0e0c09;
    --nacht-zacht: #b9ad97;
    --studio-onder: #100e0a;
    --blauw: #f6efe0;
    --blauw-diep: #ddd3bf;
    --blauw-vlak: #2e2610;
    --ok: #4cc38a;
    --ok-vlak: #12291d;
    --ok-diep: #8fe0b8;
    --goud: #f5b52e;
    --goud-vlak: #2b2412;
    --goud-inkt: #f5c451;
    --vraag-vlak: #2b2412;
    --papier: #1f1a12;
    --hover-laag: rgb(246 239 224 / 0.07);
    --beta: #251f15;
    --beta-lijn: #3a3326;
    /* beta.css is linked after this file and resets --beta on :root (0,1,0). html:root wins that. */
    --pagina: #17130c;
    --op-inkt: #17130c;
    --op-goud: #1f1a12;
    --fout: #f2837a;
  }

  body { background: var(--grond); color: var(--inkt); }
  :focus-visible { outline-color: #f5c451; }
  .skip { color: #17130c; }

  /* The bar is warm paper, not a white strip. */
  .kop { background: rgb(23 19 12 / 0.94); }
  .gm-js .is-home .kop { background: transparent; }
  .gm-js .is-home .kop[data-vast="ja"] { background: rgb(23 19 12 / 0.94); }
  .gm-js .is-home .kop[data-toon="donker"][data-vast="ja"] { background: rgb(14 12 9 / 0.94); }
  .kop__midden a:hover, .kop__rechts a:hover, .kop a[aria-current="page"], .kop__menu summary, .kop__vraag { background: rgb(246 239 224 / 0.08); }
  .kop__groep { color: #b9ad97; }
  .kop__vraag[aria-expanded="true"] { color: #17130c; }

  /* A filled button is cream with ink. White on cream would be about 1.2:1. */
  .knop { background: #f6efe0; color: #17130c; }
  .knop:hover { background: #ddd3bf; }
  .knop--licht, .knop--rustig, .knop--keuze { background: #2b251a; color: #f6efe0; box-shadow: inset 0 0 0 1px #7d7260; }
  .knop--licht:hover, .knop--rustig:hover, .knop--keuze:hover { background: #342d20; }
  .knop--keuze[aria-pressed="true"] { background: #f6efe0; color: #17130c; box-shadow: none; }
  /* The chosen term is filled with --inkt and typed in white. In dark, --inkt is cream, so the type goes back to ink. */
  .pk-keuze input:checked + label { background: #f6efe0; border-color: #f6efe0; color: #17130c; }
  .paneel--bank .knop--keuze[aria-pressed="true"] { background: #f6efe0; color: #17130c; }
  .bericht--jij { background: #2f62e0; color: #fff; }
  .paneel--btw .knop { background: #f6efe0; color: #17130c; }
  .paneel--btw .knop--licht { background: rgb(246 239 224 / 0.12); color: #f6efe0; box-shadow: inset 0 0 0 2px #f6efe0; }

  /* Photographs: a warm scrim so the title (cream) keeps 4.5:1. The btw panel already has its own dark scrim. */
  .paneel--foto::before {
    background: linear-gradient(180deg, rgb(23 19 12 / 0.86) 0%, rgb(23 19 12 / 0.58) 26%, rgb(23 19 12 / 0.16) 46%, rgb(23 19 12 / 0.16) 76%, rgb(23 19 12 / 0.82) 100%);
  }

  /* Fields outside the light islands. Placeholder #a89c86 on #1f1a12 is 6.4:1. */
  .formulier input[type="email"], .formulier select,
  .doc input, .doc textarea, .doc select,
  .reken-invoer input, .reken-veld select, .uitleg-zoek input {
    background: #1f1a12;
    color: #f6efe0;
    box-shadow: inset 0 0 0 2px #7d7260;
  }
  .formulier input[type="email"]::placeholder,
  .doc input::placeholder, .doc textarea::placeholder, .uitleg-zoek input::placeholder { color: #a89c86; }
  .formulier input[type="email"]:focus-visible,
  .doc input:focus-visible, .doc textarea:focus-visible, .doc select:focus-visible { box-shadow: inset 0 0 0 2px #f5c451; }
  .melding { background: #33191a; color: #f2837a; }

  /* The hero and the other product shots keep the light app, so ink stays on white and the photos do not flip.
     The strip under the window is a light bar of its own (public/css/held.css, .held__onder); in v3 it sits on the page
     itself (GOL-827: no gold field under it), so it takes the page colours. */
  :where(html:not(.is-v3)) .held__onder,
  :is(.venster, .tel, .factuur, .week, .uren, :where(html:not(.is-v3)) .lijst:not(.lijst--open)) {
    color-scheme: light;
    --inkt: #171a20;
    --inkt-2: #393c41;
    --inkt-zacht: #5c5e62;
    --grond: #ffffff;
    --licht: #f4f4f4;
    --licht-hover: #e9e9ea;
    --lijn: #e4e6e9;
    --blauw: #2f62e0;
    --blauw-diep: #244fc0;
    --blauw-vlak: #edf2fd;
    --ok: #17804a;
    --ok-vlak: #e2f3e9;
    --goud: #f5b52e;
    --goud-vlak: #fde6ae;
    color: #171a20;
  }
  :where(html:not(.is-v3)) .lijst .knop, .venster .app-knop { background: #2f62e0; color: #fff; }
  html.is-v3 .uitleg-zoek input,
  html.is-v3 .reken-invoer input,
  html.is-v3 .reken-veld select {
    background: #fff;
    color: #1f1a12;
    box-shadow: inset 0 0 0 2px #1f1a12;
  }
  html.is-v3 .uitleg-zoek input::placeholder { color: #5a5246; }

  /* The band stays the light blue from beta.css unless these win. .beta-band sets color #171a20
     outside any query; html .beta-band is one step stronger. #f6efe0 on #251f15 is 14.3:1.
     The link is the same cream. Light mode is outside this query; the file is absent when the switch is off. */
  html:root { --beta: #251f15; --beta-lijn: #3a3326; }
  html .beta-band { background: #251f15; color: #f6efe0; border-color: #3a3326; }
  html .beta-band a { color: #f6efe0; }
  /* v3 already paints the page. This keeps the band readable when both switches are on. */
  html.is-v3 .beta-band { background: #251f15; color: #f6efe0; border-color: #3a3326; }
}