/* ============================================================
   platform.css: shared tokens of the escapetour platform brand
   Source: docs/bronnen/schermontwerp.html. Used by the public site
   (marketing.css) and the platform admin (backend.css). Customer
   environments keep app.css and, later, their own house style (B-023).
   Load this file before marketing.css or backend.css.
   ============================================================ */

:root {
  --mk-ink:          #13262B;
  --mk-ink-soft:     #3D5257;
  --mk-mute:         #6A7A7D;
  --mk-petrol:       #1F5560;
  --mk-paper:        #EEF0EA;
  --mk-surface:      #FAFBF8;
  --mk-line:         #D3D9D3;
  --mk-line-soft:    #E3E8E2;
  --mk-yellow:       #F2B632;
  --mk-on-dark-soft: #C9D4D2;
  --mk-on-dark-mute: #9FB2B1;
  --mk-map:          #DCE3DA;
  --mk-map-road:     #C7D0C5;
  --mk-map-block:    #CBD6C6;
  --mk-shadow:       rgba(19, 38, 43, 0.45);

  /* Status colours (pills and messages) */
  --mk-ok:           #1C5A3C;
  --mk-ok-bg:        #DCEBE3;
  --mk-warn:         #7A5200;
  --mk-warn-bg:      #F8E7C2;
  --mk-alert:        #A8431E;
  --mk-alert-bg:     #F6E3DB;
  --mk-petrol-bg:    #DCE7E5;

  --mk-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mk-font-body:    'Instrument Sans', system-ui, sans-serif;
  --mk-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale: every font-size in marketing.css and backend.css comes from
     this list, so the site and the admin read as one family. */
  --mk-text-xs: 12px;   /* tags, pills, table headers, footnotes */
  --mk-text-sm: 13px;   /* meta, labels, hints */
  --mk-text-md: 14px;   /* tables, buttons */
  --mk-text:    15px;   /* body, inputs, navigation */
  --mk-text-lg: 17px;   /* card and section titles */
  --mk-h2:      28px;   /* secondary headings, dialogs */
  --mk-h1:      36px;   /* page titles */
  --mk-leading: 1.5;

  --mk-radius:    16px; /* cards */
  --mk-radius-sm: 10px; /* inputs, nav items */

  --mk-gutter: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Brand mark (logo variant 1): two dots joined by a dashed path. */
.mk-logo .mk-logo-ink    { fill: var(--mk-ink); }
.mk-logo .mk-logo-accent { fill: var(--mk-yellow); stroke: var(--mk-ink); stroke-width: 2; }
.mk-logo .mk-logo-path   { stroke: var(--mk-ink); stroke-width: 2; stroke-dasharray: 3 3; fill: none; }

/* Same mark on a dark background */
.mk-logo-on-dark .mk-logo-ink    { fill: var(--mk-surface); }
.mk-logo-on-dark .mk-logo-accent { fill: var(--mk-yellow); stroke: none; }
.mk-logo-on-dark .mk-logo-path   { stroke: var(--mk-surface); stroke-width: 2; stroke-dasharray: 3 3; fill: none; }