/* Dark variants of the house style and of every decoration.

   Loaded after house.css: always when the visitor chose dark, and with
   media="(prefers-color-scheme: dark)" when they left it on automatic (see
   tenants/schemes.py). Nothing here is behind a media query of its own.

   The shared part is prefixed with :where([data-decoration]), which keeps it
   at the weight of the house style: it wins over house.css by coming later,
   but a decoration's own rules still win over it. Each decoration then has a
   section of its own, mostly swapping the tokens its section in house.css
   declares. */

:root { color-scheme: dark; }

/* ----------------------------------------------------------------- tokens */
/* Full weight on purpose: these replace the light tokens a decoration sets,
   and a decoration's dark section below sets its own again. */
[data-decoration] {
  color-scheme: dark;
  --ink: #ecebe6;
  --ink-soft: #c5c4be;
  --muted: #9c9b96;
  --paper: #111315;
  --surface: #1a1d20;
  --rule: #2d3135;
  --rule-strong: #484d53;
  /* The accent as text: lifted, so a dark brand colour still reads. */
  --accent-text: color-mix(in srgb, var(--accent) 55%, #ffffff);
}

/* Photo frames stay white in every decoration: Rentman's product shots are
   taken on white. Full weight, so no decoration's frame colour beats it. */
[data-decoration] :is(.card__frame, .detail__frame, .cattile__frame):has(img),
[data-decoration] .cartlines__thumb img { background: #ffffff; }

:where([data-decoration]) :is(.paklijst__qty, .summary__qty, .summary__lines em,
  .progress [aria-current="step"], .btn--link:hover, .setpeek summary:hover) {
  color: var(--accent-text);
}
:where([data-decoration]) a:hover { text-decoration-color: var(--accent-text); }

/* Light lines are too loud on dark: the heavy ones step down a shade. */
:where([data-decoration]) :is(.paklijst, .summary) { border-color: var(--rule-strong); }
:where([data-decoration]) .paklijst__head { background: var(--rule); color: var(--ink); }
:where([data-decoration]) .paklijst__foot { border-top-color: var(--rule-strong); }

/* The brand's own logo for dark, when it has one. */
.wordmark__logo--light { display: none; }
.wordmark__logo--dark { display: block; }

:where([data-decoration]) .menu__list { box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.7); }
:where([data-decoration]) .field__error { color: #ff8a80; }
:where([data-decoration]) .errorsummary { border-color: #ff8a80; }
:where([data-decoration]) .errorsummary h2 { color: #ff8a80; }
:where([data-decoration]) .colophon { background: #0b0c0e; border-top-color: var(--rule); }

/* --------------------------------------------------- "rich": Uitgesproken */
[data-decoration="rich"] {
  --tint: color-mix(in srgb, var(--accent) 16%, var(--paper));
  --tint-strong: color-mix(in srgb, var(--accent) 28%, var(--paper));
  --dots: radial-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 1.3px, transparent 1.6px);
}
/* The dark bar and footer are drawn in ink, which is light here. */
[data-decoration="rich"] :is(.catbar, .colophon) { background: #0a0b0d; }
[data-decoration="rich"] .catbar a { color: var(--ink-soft); }
[data-decoration="rich"] .catbar a:hover,
[data-decoration="rich"] .catbar a[aria-current="page"],
[data-decoration="rich"] .catbar a[aria-current="true"] { color: var(--ink); }
[data-decoration="rich"] .colophon { color: var(--muted); }
[data-decoration="rich"] .colophon :is(strong, a) { color: var(--ink); }

/* ----------------------------------------------------------- "soft": Zacht */
[data-decoration="soft"] {
  --paper: color-mix(in srgb, var(--accent) 6%, #111315);
  --surface: color-mix(in srgb, var(--accent) 5%, #1b1e21);
  --rule: color-mix(in srgb, var(--accent) 12%, #2b2f33);
  --tint: color-mix(in srgb, var(--accent) 22%, var(--surface));
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 30px -14px rgb(0 0 0 / 0.75);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 40px -16px color-mix(in srgb, var(--accent) 55%, rgb(0 0 0 / 0.6));
}

/* ------------------------------------------------------- "bold": Grafisch */
/* Heavy lines in light ink; the hard shadow turns to the accent, since a
   dark shadow would vanish. */
[data-decoration="bold"] {
  --rule-strong: var(--ink);
  --offset: 4px 4px 0 var(--accent);
}
[data-decoration="bold"] :is(.card, .cattile__link):hover { box-shadow: 6px 6px 0 var(--ink); }

/* ------------------------------------------------------- "stage": Podium */
/* The house lights go down: deeper black, stronger beams. */
[data-decoration="stage"] {
  --paper: #0c0d10;
  --surface: #15171b;
  --rule: #272a30;
  --beam: color-mix(in srgb, var(--accent) 28%, transparent);
  --glow: color-mix(in srgb, var(--accent) 75%, transparent);
  --floor: #060708;
  --title-to: var(--accent-text);
}

/* --------------------------------------------------- "case": Flightcase */
/* Aluminium edges on a dark case; the tape stays tape-coloured. */
[data-decoration="case"] {
  --paper: #15171a;
  --surface: #1e2125;
  --edge: #464b52;
  --lid: #0b0c0e;
  --cap: #5a5f67;
  --rivet: #1a1c1f;
  --plate: rgb(255 255 255 / 0.035);
  --plate-base: #1b1d21;
}