/* Morning Dutch brand overrides for Source. Tokens: docs/morning-dutch-palette.md + typography.md */
:root {
  --md-delft: #1F3F8C; --md-oranje: #F2731D; --md-boter: #F6D77A;
  --md-kanaal: #4E6B6A; --md-mist: #E7ECEF; --md-inkt: #161B2B;
  --ghost-accent-color: var(--md-delft);
  --background-color: var(--md-mist);
  --color-darker-gray: var(--md-inkt);
  --color-primary-text: var(--md-inkt);
  --color-secondary-text: var(--md-kanaal);
  --color-border: #D7DCEA;
  --gh-font-heading: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --gh-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Figtree", system-ui, sans-serif;
  --font-serif-alt: "Figtree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
body { background: var(--md-mist); color: var(--md-inkt); }
h1, h2, h3, h4, .gh-article-title, .gh-card-title, .gh-navigation-logo { letter-spacing: -.02em; text-wrap: balance; }
.gh-article-title, .gh-header h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.gh-card-title { font-weight: 700; letter-spacing: -.01em; }
.gh-content > p, .gh-content > ul, .gh-content > ol { line-height: 1.55; }
.gh-content a:not(.gh-button, .kg-btn) { color: var(--md-delft); }
.gh-button, .kg-btn { background: var(--md-oranje); color: var(--md-inkt); font-weight: 600; }
.gh-button:hover, .kg-btn:hover { background: #C66120; color: var(--md-mist); }
.gh-card-tag, .gh-article-tag, .gh-card-meta, time { font-family: var(--font-mono); }
.gh-card-tag, .gh-article-tag { font-family: var(--gh-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--md-delft); }
.gh-content :not(pre) > code { background: var(--md-boter); color: var(--md-inkt); }
.gh-content blockquote:not([class]) { border-left: 3px solid var(--md-oranje); }
.gh-footer { background: var(--md-inkt); color: var(--md-mist); }
.gh-footer a { color: var(--md-boter); }
:focus-visible { outline: 3px solid var(--md-oranje); outline-offset: 2px; }
.md-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--md-inkt);
    --color-darker-gray: var(--md-mist);
    --color-primary-text: var(--md-mist);
    --color-secondary-text: rgb(231 236 239 / .64);
    --color-border: rgb(231 236 239 / .15);
    --color-lighter-gray: rgb(255 255 255 / .1);
  }
  body { background: var(--md-inkt); color: var(--md-mist); }
  .gh-navigation, .gh-header, .gh-main { background: var(--md-inkt); color: var(--md-mist); }
  .gh-content a:not(.gh-button, .kg-btn), .gh-card-tag, .gh-article-tag { color: var(--md-boter); }
  .gh-navigation-logo img:not(.md-logo-dark) { display: none; }
  .gh-navigation-logo .md-logo-dark { display: block; }
  .gh-footer { background: #0E1220; }
}
/* footer is Inkt in both modes: make the signup form readable on it */
.gh-footer { --color-primary-text: var(--md-mist); --color-darker-gray: var(--md-mist); --color-secondary-text: rgb(231 236 239 / .7); }
.gh-footer .gh-form { background-color: rgb(231 236 239 / .12); box-shadow: inset 0 0 0 1px rgb(231 236 239 / .35); }
.gh-footer .gh-form:hover { background-color: rgb(231 236 239 / .2); }
.gh-footer .gh-form-input { color: var(--md-mist); }
.gh-footer .gh-form-input::placeholder, .gh-footer button.gh-form-input { color: rgb(231 236 239 / .7); }
.gh-footer .gh-form-input:focus-visible { outline-offset: -3px; }
.gh-footer .gh-form-btn, .gh-footer .gh-form button[type=submit] { color: var(--md-inkt); background: var(--md-oranje); }
/* footer always sits on Inkt: always show the reversed logo there */
.gh-footer-logo img:not(.md-logo-dark) { display: none; }
.gh-footer-logo .md-logo-dark { display: block; max-height: 40px; }
/* Ghost injects --background-color / accent after this file: beat it with html:root */
@media (prefers-color-scheme: dark) {
  html:root { --background-color: var(--md-inkt); --ghost-accent-color: var(--md-boter); }
  .gh-form-input { color: var(--md-mist); }
  .gh-form-input::placeholder, button.gh-form-input { color: rgb(231 236 239 / .7); }
  .gh-navigation-actions { background: transparent; }
}
/* light mode: placeholder needs AA contrast (Kanaal-700 #384B51) */
.gh-form-input::placeholder, button.gh-form-input { color: #384B51; }
.gh-footer .gh-form-input::placeholder, .gh-footer button.gh-form-input { color: rgb(231 236 239 / .7); }
@media (prefers-color-scheme: dark) { .gh-form-input::placeholder, button.gh-form-input { color: rgb(231 236 239 / .7); } }
/* topics dropdown in the home header: links to tag pages */
.md-topics { position: relative; font-family: var(--gh-font-body); }
.md-topics summary { cursor: pointer; list-style: none; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--md-delft); color: var(--md-mist); }
.md-topics summary:hover, .md-topics[open] summary { background: #16306C; }
@media (prefers-color-scheme: dark) { .md-topics summary { background: var(--md-boter); color: var(--md-inkt); } .md-topics summary:hover, .md-topics[open] summary { background: #E3C262; } }
.md-topics summary::-webkit-details-marker { display: none; }
.md-topics summary::after { content: " \25BE"; }
.md-topics-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; min-width: 200px; display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: var(--background-color); box-shadow: 0 8px 28px rgb(22 27 43 / .18), inset 0 0 0 1px var(--color-border); }
.md-topics-menu a { padding: 8px 12px; border-radius: 8px; color: var(--color-primary-text); }
.md-topics-menu a:hover { background: rgb(31 63 140 / .08); }