/* MAYUMA CHAT Web-Client – Basis-Tokens (Produktstruktur)
 * Quelle: freigegebener Prototyp 04_UI_UX/Prototypen/css/tokens.css, Richtung M „MAYUMA Referenz“ (Hell).
 * Überführt in eine saubere Struktur: nur Richtung M, keine Vergleichsrichtungen A/B/C,
 * Schriftgrößen in rem (folgen der Browser-Schriftgröße und der App-Textgröße bis 200 %).
 * Token-Vertrag: DOC-07-THM §2. Themes überschreiben nur Werte (themes.css).
 */
:root {
  /* Schrift: ausschließlich Systemschriften (keine Web-Fonts) */
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --fw-regular: 400; --fw-medium: 560; --fw-bold: 650;
  --fs-xs: .75rem; --fs-s: .8125rem; --fs-m: .9375rem; --fs-l: 1.0625rem; --fs-xl: 1.25rem; --fs-xxl: 1.625rem;
  --lh: 1.45;
  --title-weight: 750; --title-tracking: -0.02em;

  /* Form */
  --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --btn-h: 3rem; --btn-radius: 12px; --input-radius: 12px; --search-radius: var(--radius-pill);
  --bubble-radius: 18px; --fab-size: 3.5rem; --fab-radius: 50%;
  --touch: 3rem;
  --row-pad-y: .625rem;
  --nav-h: 4rem;
  --rail-w-narrow: 5.5rem; --rail-w-wide: 14.5rem;
  --list-w: 22rem;

  /* Abstände */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;

  /* Bewegung (reduzierte Bewegung und Senior setzen sie auf 0) */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 280ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Farben – Richtung M Hell (Blue). Kontraste: Text/--bg 15,97:1 · --text-3/--surface 5,63:1 · Weiß/--primary 5,26:1 */
  color-scheme: light;
  --bg: #F4F7FC; --surface: #FFFFFF; --surface-2: #EAF0F8; --surface-elev: #FFFFFF;
  --border: #E1E7F0; --border-strong: #7C879E; --divider: #EDF1F7;
  --text: #0F1B33; --text-2: #4B5573; --text-3: #5E6781; --text-on-primary: #FFFFFF; --heading: #0F1B33;
  --primary: #0A66E0; --primary-hover: #0853B8; --primary-soft: #E4EEFE;
  --accent: #0B63D9; --accent-2: #0B7285;
  --success: #0F7537; --warning: #8A5300; --danger: #C8261C; --info: #0B63D9;
  --success-soft: #E3F4E8; --warning-soft: #FBEFD9; --danger-soft: #FDECEA; --info-soft: #E4EEFE;
  --bubble-out: #0A66E0; --bubble-out-text: #FFFFFF; --bubble-in: #FFFFFF; --bubble-in-text: #0F1B33; --bubble-in-border: #E1E7F0;
  --rail-bg: #18263C; --rail-text: #C9D3E3; --rail-active-bg: #0A6AEF; --rail-active-text: #FFFFFF;
  --nav-bg: #FFFFFF; --nav-text: #5E6781; --nav-active: #0A66E0;
  --focus-ring: #0A66E0;
  --presence-online: #16A34A; --presence-away: #A86200;
  --unread-bg: #0A6AEF; --unread-text: #FFFFFF;
  --ticks-read-out: #BFE3FF;
  --scrim: rgba(8, 12, 20, .48);
  --shadow-1: 0 1px 2px rgba(15,27,51,.05), 0 1px 3px rgba(15,27,51,.04);
  --shadow-2: 0 4px 16px rgba(15,38,79,.08), 0 1px 3px rgba(15,27,51,.05);
  --shadow-3: 0 18px 44px rgba(15,38,79,.16), 0 4px 12px rgba(15,27,51,.06);
  --av-1: #0A5BC4; --av-2: #0D6E66; --av-3: #7A3E9D; --av-4: #A3460A; --av-5: #B0254F; --av-6: #1D6B8F; --av-7: #4F6B22; --av-8: #10264F;
  --av-text: #FFFFFF;
  --btn-primary-bg: var(--primary);
  --deco-band: none;

  /* Onboarding (DOC-07-ONB): ruhige Flächen */
  --onb-sky: #E4EEFE; --onb-card: #FFFFFF; --onb-soft: #EAF0F8; --onb-hint: #E6F2FB; --onb-sub: #E4EEFE;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
}
html[data-reduce-motion="true"] { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }