@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/archivo-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Kiliverse – Design-Tokens (aus Claude Design, 2026-09-20). Hell = :root, Dunkel = [data-theme="dark"].
   Ohne data-theme folgt das Design der Systemeinstellung (prefers-color-scheme). Schrift Archivo selbst gehostet. */
:root {
  color-scheme: light;
  --bg: #f3f2f2; --surface: #ffffff; --surface-2: #eae9e9;
  --text: #201e1d; --text-muted: #605d5d; --divider: #201e1d; --border: #d7d3d3;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-active: #1e40af;
  --accent-soft: #dbe7ff; --accent-text: #1e40af; --on-accent: #ffffff;
  --ok-bg: #dcf5e4;   --ok-text: #14532d;   --ok-dot: #16a34a;
  --warn-bg: #fdf1c7; --warn-text: #713f12; --warn-dot: #ca8a04;
  --bad-bg: #fde2e2;  --bad-text: #7f1d1d;  --bad-dot: #dc2626;
  --danger: #b91c1c;  --danger-hover: #991b1b;
  --svc-nextcloud: #0082c9; --svc-immich: #6b46c1; --svc-links: #0d9488;
  --svc-mail: #d97706; --svc-vault: #1e3a8a; --svc-flix: #be123c;
  --svc-konto: #475569; --svc-help: #2563eb; --svc-books: #7c2d12;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-h3: 20px; --fs-h2: 26px; --fs-h1: 34px; --fs-display: 44px;
  --lh: 1.55;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(45,43,43,.10); --shadow-md: 0 3px 10px rgba(45,43,43,.12); --shadow-lg: 0 12px 32px rgba(45,43,43,.18);
  --container: 1200px; --nav-h: 64px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414; --surface: #1f1f1f; --surface-2: #2a2a2a;
  --text: #f3f2f2; --text-muted: #b5b1b1; --divider: #f3f2f2; --border: #3a3838;
  --accent: #7cb4ff; --accent-hover: #9cc6ff; --accent-active: #5f9df0;
  --accent-soft: #1f3559; --accent-text: #9cc6ff; --on-accent: #0b1a33;
  --ok-bg: #143d25;   --ok-text: #a7f3c4;   --ok-dot: #4ade80;
  --warn-bg: #3f2f0a; --warn-text: #fde68a; --warn-dot: #facc15;
  --bad-bg: #4a1414;  --bad-text: #fecaca;  --bad-dot: #f87171;
  --danger: #f87171;  --danger-hover: #fca5a5;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 3px 10px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141414; --surface: #1f1f1f; --surface-2: #2a2a2a;
    --text: #f3f2f2; --text-muted: #b5b1b1; --divider: #f3f2f2; --border: #3a3838;
    --accent: #7cb4ff; --accent-hover: #9cc6ff; --accent-active: #5f9df0;
    --accent-soft: #1f3559; --accent-text: #9cc6ff; --on-accent: #0b1a33;
    --ok-bg: #143d25;   --ok-text: #a7f3c4;   --ok-dot: #4ade80;
    --warn-bg: #3f2f0a; --warn-text: #fde68a; --warn-dot: #facc15;
    --bad-bg: #4a1414;  --bad-text: #fecaca;  --bad-dot: #f87171;
    --danger: #f87171;  --danger-hover: #fca5a5;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 3px 10px rgba(0,0,0,.45); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  }
}