/* driftzz.css — kleurlaag over Casper 5.12.1
 *
 * BRON: driftzz-site/src/styles/tokens.css, dat op zijn beurt Brams
 * brand-guidelines.md (vastgesteld 10-8-2026) volgt. Wijkt dit bestand daarvan
 * af, dan is DIT bestand fout — wijzig eerst de bron.
 *
 * ROLVERDELING uit de guideline §2, hier letterlijk aangehouden:
 * "donker en cyaan dragen, roze en geel accentueren. Nooit alle vier even hard
 * in één sectie." Daarom: header/footer op diepzee (dragend), knoppen en links
 * op roze (accent), geel alleen als label. Cyaan staat bewust NIET op de header
 * — dat zou twee dragende kleuren in één vlak geven.
 *
 * Casper 5.12.1 hardcodeert het meeste; alleen deze handvol vars is echt
 * overschrijfbaar. Wat hieronder een expliciete selector heeft, staat er omdat
 * er geen variabele voor bestond.
 *
 * NIET GEDAAN: typografie. De guideline vraagt Montserrat (koppen 800, kleine
 * letters) + Caveat voor annotaties. Dat vraagt een fontbestand of een externe
 * bron, en de opdracht was "alleen het logo en de kleuren". [OPEN]
 */

:root {
  /* ---- merkkleuren, letterlijk uit tokens.css ---- */
  --zee: #12333b;
  --cyaan: #2be0e0;
  --roze: #ff3d9a;
  --geel: #f5e547;
  --krijt: #1c1b18;
  --papier: #f5f0e4;
  --zee-diep: #0c242a;
  --zee-licht: #1a4650;
  --roze-diep: #e32a85;
  --cyaan-diep: #17c4c4;

  /* ---- Caspers eigen vars, omgezet ---- */
  --color-darkgrey: #12333b;        /* lopende tekst: diepzee op wit = 12,1:1 */
  --color-midgrey: #4a6a72;         /* secundaire tekst, 5,2:1 op wit         */
  --color-secondary-text: #4a6a72;
  --color-lightgrey: var(--papier);
  --color-wash: var(--papier);
  --color-border: rgba(18, 51, 59, 0.18);
  --color-darkmode: var(--krijt);
  --color-yellow: var(--geel);
}

/* Header en footer dragen: diepzee, niet het accent.
   Casper zet hier normaal --ghost-accent-color neer. De accent_color-instelling
   staat daarom óók op diepzee (Ghost-instelling, niet dit bestand) — deze regels
   houden het staan als iemand die instelling later wijzigt. */
.site-header,
.site-header-content,
.gh-head {
  background: var(--zee);
  color: #fff;
}

.site-footer {
  background: var(--zee-diep);
  color: #fff;
}

/* Accenten: roze voor wat aanklikbaar is, hoogstens één blikvanger per sectie. */
.post-card-title a:hover,
.post-content a:not(.kg-btn),
.gh-head-link:hover {
  color: var(--roze);
}

a.gh-head-button {
  background: var(--roze);
  color: #fff;
}

a.gh-head-button:hover {
  background: var(--roze-diep);
}

.kg-btn-accent,
.button-primary,
.subscribe-form button,
button[type="submit"] {
  background: var(--roze) !important;
  color: #fff !important;
  border-color: var(--roze) !important;
}

.kg-btn-accent:hover,
.button-primary:hover,
.subscribe-form button:hover,
button[type="submit"]:hover {
  background: var(--roze-diep) !important;
  border-color: var(--roze-diep) !important;
}

/* Geel alleen als label/onderstreping — nooit als vlak. */
.post-card-tags,
.article-tag a,
.gh-head-label {
  color: var(--geel);
}

/* Bewijs-/citaatvlakken op krijt met papieren kaarten, conform §2. */
blockquote {
  border-left-color: var(--cyaan);
}

.post-content blockquote.kg-blockquote-alt {
  background: var(--krijt);
  color: var(--papier);
}