/*
 * Qnext Websitebeheer — stabiele, lokale UI-basis voor Sveltia CMS 0.187.0.
 *
 * De gepinde Sveltia-bundel verwijst voor deze drie fonts naar jsDelivr. De
 * beheer-CSP laat externe runtimefonts bewust niet toe. Lokale aliases houden
 * pictogrammen en typografie daarom betrouwbaar zonder de CSP te verruimen.
 * Alleen publieke Sveltia UI-tokens en ongehashte componentklassen gebruiken.
 */

@font-face {
  font-family: "Qnext CMS Sans";
  src: url("/admin/fonts/source-sans-3-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Qnext CMS Mono";
  src: url("/admin/fonts/noto-mono-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Qnext CMS Symbols";
  src: url("/admin/fonts/material-symbols-outlined-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}

html:root {
  --sui-font-family-default: "Qnext CMS Sans", system-ui, sans-serif;
  --sui-font-family-monospace: "Qnext CMS Mono", ui-monospace, monospace;
  --sui-heading-font-family: "Qnext CMS Sans", system-ui, sans-serif;
  --sui-base-hue: 219;
  --sui-focus-ring-color: #7c3aed;
  --sui-control-small-border-radius: 8px;
  --sui-control-medium-border-radius: 10px;
  --sui-control-large-border-radius: 12px;
  font-family: var(--sui-font-family-default);
}

html .material-symbols-outlined {
  font-family: "Qnext CMS Symbols";
  font-style: normal;
  font-weight: 300;
  font-feature-settings: "liga" 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  text-rendering: optimizeLegibility;
}

html:root[data-theme="light"] {
  --sui-primary-accent-color: #0f1f42;
  --sui-primary-accent-color-text: #ffffff;
  --sui-focus-ring-color: #7c3aed;
}

html:root[data-theme="dark"] {
  --sui-primary-accent-color: #9ed8d4;
  --sui-primary-accent-color-text: #0f1f42;
  --sui-focus-ring-color: #c4b5fd;
}

.sui.app-shell {
  letter-spacing: 0.005em;
}