/* Design choices (decision 16): type sets, grounds and logos. The defaults (Zwart, Archivo, the current logo) are the
   tokens in style.css; these rules apply only when inc/design.php sets data-font, data-ground or data-logo on <html>.
   Three roles: condensed numbers (--f-num), wide caps (--f-caps), reading text (--f-body). */

html[data-font="serif"] { --f-body: 'Source Serif 4', Georgia, serif; }
html[data-font="bodoni"] {
  --f-num: 'Bodoni Moda', Didot, serif; --f-caps: 'Hanken Grotesk', system-ui, sans-serif;
  --f-body: 'Hanken Grotesk', system-ui, sans-serif; --num-scale: 0.8;
}
/* Bodoni's hairlines break down in small caps; it keeps only the large display roles. */
html[data-font="bodoni"] .band-head h2,
html[data-font="bodoni"] .sl .t,
html[data-font="bodoni"] .decoded .comp,
html[data-font="bodoni"] .decode-line .d-name,
html[data-font="bodoni"] .inner .text h2 { font-family: 'Bodoni Moda', Didot, serif; }
html[data-font="jost"] {
  --f-num: 'Jost', system-ui, sans-serif; --f-caps: 'Jost', system-ui, sans-serif;
  --f-body: 'Jost', system-ui, sans-serif; --num-scale: 0.78;
}
html[data-font="affiche"] {
  --f-num: 'Big Shoulders Display', system-ui, sans-serif; --f-caps: 'Big Shoulders Display', system-ui, sans-serif;
  --f-body: 'Libre Franklin', system-ui, sans-serif; --num-scale: 1.05;
}
html[data-font="affiche"] .band-head h2 { letter-spacing: 0.01em; }

/* Grounds. The composers keep the colour; only the ground changes. Sleeves and the player stay black objects on every
   ground: they restore the Zwart tokens for themselves and everything inside them. */
.player, .home-genres .cover {
  --black: #0a0a0a; --ink: #f2f2ee; --ink-2: #b4b4ae; --ink-3: #8a8a84;
  --hair: rgba(242, 242, 238, 0.18); --hair-strong: rgba(242, 242, 238, 0.45); --focus: #f2f2ee;
}
html[data-ground="olijf"] {
  --black: #323d2d; --black-2: #3b4736; --ink: #f3f2e8; --ink-2: #c9cbb8; --ink-3: #aeb09c;
  --hair: rgba(243, 242, 232, 0.2); --hair-strong: rgba(243, 242, 232, 0.5);
  --sleeve: #f4f3ea; --sleeve-bg: #11150f; --thumb: #5d6a55; --thumb-hover: #7d8a74;
}
html[data-ground="beton"] {
  --black: #a3a19b; --black-2: #b1afa9; --ink: #0d0d0c; --ink-2: #262624; --ink-3: #343431;
  --hair: rgba(13, 13, 12, 0.22); --hair-strong: rgba(13, 13, 12, 0.55);
  --sleeve: #f5f5f2; --thumb: #6d6b66; --thumb-hover: #4d4b47;
}
html[data-ground="papier"] {
  --black: #ece9e2; --black-2: #f7f5f0; --ink: #111110; --ink-2: #44443f; --ink-3: #5a5954;
  --hair: rgba(17, 17, 16, 0.16); --hair-strong: rgba(17, 17, 16, 0.45);
  --sleeve: #ffffff; --thumb: #b9b6ad; --thumb-hover: #8f8c84;
}
/* Dagkleur tints the ground with today's suit colour (--day, set on <html> for the home page and a work). */
html[data-ground="dag"] {
  --black: color-mix(in oklab, var(--day, #50b861) 24%, #050505);
  --black-2: color-mix(in oklab, var(--day, #50b861) 30%, #0a0a0a);
  --ink-3: #a3a39c;
  --hair: rgba(242, 242, 238, 0.2);
  --thumb: color-mix(in oklab, var(--day, #50b861) 45%, #222);
}

/* Logos. The lockup is an outlined SVG that takes the ink; its accent takes today's suit colour (Debussy Green on a
   page without one, never the ink) and its knockout the ground. */
.brand.has-logo { --logo-accent: var(--day, #50b861); --logo-knockout: var(--black); }
.brand .lockup { display: block; height: 30px; width: calc(30px * var(--ratio)); }
.brand .lockup svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@media (max-width: 640px) { .brand .lockup { height: min(24px, 210px / var(--ratio)); width: min(24px * var(--ratio), 210px); } }

/* The founder's tan has no contrast on a light ground: the big decorative 'tv' takes the ink there. */
html[data-ground="beton"] .tv-mark, html[data-ground="papier"] .tv-mark { color: var(--ink); }