/* Merk SMC (Sales Marketing Coach): wordt na app.css/ux.css geladen als MERK=smc (app/merk.py).
   Kleuren uit brands/salesmarketingcoach/tokens.css; alleen tokens overschrijven, geen losse regels in modules. */
/* Source Sans 3 (SIL Open Font License), lokaal: variabel lettertype, één bestand voor gewicht 200 t/m 900. Geen Google-verwijzing. */
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal; font-display: swap;
  src: url("/static/fonts/source-sans-3-latin-variabel.woff2") format("woff2"); }
:root {
  --brand-primary: #1e1a4f;
  --brand-secondary: #e21919;
  --brand-text: #4a4966;
  --brand-text-strong: #1e1a4f;
  --brand-bg-soft: #f6f5fb;
  /* Wit op #e21919 haalt 4,8:1 (WCAG AA). */
  --brand-button-bg: #e21919;
  --brand-button-bg-hover: #b31212;
  --brand-border-subtle: rgba(30, 26, 79, 0.07);
  --brand-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --brand-radius-button: 4px;
  --brand-radius-input: 4px;
  --brand-radius-card: 4px;
  --brand-radius-menu: 8px;
  --brand-shadow-menu: 0 18px 44px rgba(30, 26, 79, 0.16);
  --brand-shadow-card: 0 18px 40px rgba(30, 26, 79, 0.1);
  --brand-shadow-button-hover: 0 10px 22px rgba(226, 25, 25, 0.28);

  --app-bg: #f6f5fb;
  --app-rand: #dedcea;
  --app-navy-licht: #ecebf5;
  --app-focus: #1e1a4f;
  --app-gedempt: #6b6a86;
  --app-rood-tekst: #b31212;
  --app-navy-zacht: #c9c7e2;
  --app-navy-tint: #9b98c4;
  --app-navy-midden: #4f4a8f;
  --app-schaduw-hover: 0 10px 28px -8px rgba(30, 26, 79, .4);
  --app-backdrop: rgba(30, 26, 79, .35);
}
/* Koppen in Montserrat 800, lopende tekst in de bodyletter (SMC-kenmerk) */
h1, h2, h3, .paginakop h1, .login-merk h1 { font-family: "Montserrat", Arial, sans-serif; font-weight: 800; letter-spacing: -0.5px; }
.zijbalk .logo img { height: 38px; }
/* Telefoon: geen zijbalk met logo, dus het SMC-teken (rode driehoek, brands/salesmarketingcoach/assets) linksboven */
.topbalk-merk { display: none; }
@media (max-width: 820px) {
  .topbalk-merk { display: flex; flex: none; align-items: center; margin-left: -4px; }
  .topbalk-merk img { width: 30px; height: 30px; display: block; }
}