/* Huisstijl sdz.nu (03-11-2026, was koensadza.nl navy/goud): lichtgrijs/zwart, oranje alleen als accent,
   Switzer voor alles, Geist Mono voor geheimen en links. Over de DaisyUI-thema's van Yopass. */
@font-face { font-family: "Switzer"; font-weight: 400; font-display: swap; src: url("/brand/fonts/switzer-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 500; font-display: swap; src: url("/brand/fonts/switzer-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 700; font-display: swap; src: url("/brand/fonts/switzer-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("/brand/fonts/geist-mono-400-normal.woff2") format("woff2"); }

/* Licht */
:root[data-theme="emerald"] {
  --color-base-100: #E9EBEA;
  --color-base-200: #F3F4F3;
  --color-base-300: #D3D7D5;
  --color-base-content: #111212;
  --color-primary: #E8401C;
  --color-primary-content: #FFFFFF;
  --color-secondary: #5D6260;
  --color-secondary-content: #F3F4F3;
  --color-accent: #E8401C;
  --color-accent-content: #FFFFFF;
  --color-neutral: #111212;
  --color-neutral-content: #E9EBEA;
  --color-warning: #FFFFFF;
  --color-warning-content: #111212;
  --color-success: #E8401C;
}

/* Donker */
:root[data-theme="dim"] {
  --color-base-100: #0F1010;
  --color-base-200: #181919;
  --color-base-300: #2A2C2B;
  --color-base-content: #ECEDEB;
  --color-primary: #FF5A33;
  --color-primary-content: #0F1010;
  --color-secondary: #9BA09D;
  --color-secondary-content: #0F1010;
  --color-accent: #FF5A33;
  --color-accent-content: #0F1010;
  --color-neutral: #1D1F1F;
  --color-neutral-content: #ECEDEB;
  --color-warning: #232524;
  --color-warning-content: #ECEDEB;
  --color-success: #FF5A33;
}

body { font-family: "Switzer", system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; }
h1, h2, h3, header a .truncate { font-family: "Switzer", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; }
textarea, pre, code, kbd, input[type="text"][readonly], .font-mono { font-family: "Geist Mono", ui-monospace, monospace; letter-spacing: 0; }
::selection { background: var(--color-base-content); color: var(--color-base-100); }
/* Kop = het woordmerk van sdz.nu: "sdz" + oranje ".nu", met "veilig delen" ernaast (03-11). */
header a[href="/"] img { display: none; }
header a .truncate { font-size: 0; overflow: visible; }
header a .truncate::before, header a .truncate::after { font: 700 1.65rem/1 "Switzer", system-ui, sans-serif; letter-spacing: -0.065em; }
header a .truncate::before { content: "sdz"; color: var(--color-base-content); }
header a .truncate::after { content: ".nu"; color: var(--color-primary); }
header a[href="/"]::after { content: "veilig delen"; margin-left: 0.8rem; padding-left: 0.8rem; border-left: 1px solid var(--color-base-300);
  font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }

/* Op smalle schermen met veel menuknoppen (verstuur) alleen het woordmerk. */
@media (max-width: 640px) { header a[href="/"]::after { content: none; } }

/* Groot, heel licht woordmerk onderaan, zoals op sdz.nu zelf. */
body::after { content: "sdz.nu"; position: fixed; left: -0.05em; bottom: -0.16em; z-index: -1; pointer-events: none;
  font: 700 34vw/0.8 "Switzer", system-ui, sans-serif; letter-spacing: -0.065em; white-space: nowrap;
  color: color-mix(in oklab, var(--color-base-content) 5%, transparent); }
/* Page background moves from the app wrapper to body, so the watermark (z -1 in body's own stacking context) shows between them. */
body { isolation: isolate; background: var(--color-base-200); }
#root > .min-h-screen { background: transparent; }

/* Waarschuwingen: neutraal vlak met een oranje streep i.p.v. een zalmkleurig blok (Koen 03-11). */
.alert-warning { border: 1px solid var(--color-base-300); border-left: 4px solid var(--color-primary); }
.alert-warning svg { color: var(--color-primary); }
/* Hoofdknop altijd herkenbaar: oranje vlak, vette tekst. */
.btn-primary { font-weight: 700; letter-spacing: -0.01em; padding-inline: 1.25rem; white-space: nowrap; }