/* MAYUMA CHAT Web-Client – Themes Blue · Rose · Dark · Senior (DOC-07-THM, DEC-31)
 * Ein Theme ändert nur Darstellung: Farben, Illustration, Kontraste, Schriftgrößen, Rundungen, Abstände, Stimmung.
 * Gleiche Seiten, gleiche Funktionen, gleiche Navigation. Auswahl über html[data-theme].
 * Werte aus dem freigegebenen Prototyp (Prototypen/css/themes.css); Kontraste dort nachgerechnet (DOC-07-THM §3).
 * Neues Theme: weiteren Block mit denselben Token-Namen anlegen, in js/core/theme.js (THEMES) eintragen, Kontraste prüfen.
 */

/* 1 · BLUE (Standard) = Richtung M Hell aus tokens.css; nur Illustration */
html[data-theme="blue"] {
  --deco-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M0 70 C80 40 160 90 240 62 S360 40 400 58 V120 H0z' fill='%23DCE9FB'/%3E%3Cpath d='M0 92 C90 70 200 110 300 84 S380 76 400 82 V120 H0z' fill='%23C7DCF8'/%3E%3C/svg%3E");
}

/* 2 · ROSE – eigenes Farbsystem Rosé/Beere/Lavendel, weichere Formen, florale Illustration */
html[data-theme="rose"] {
  color-scheme: light;
  --heading: #3A1027;
  --bg: #FFF4F8; --surface: #FFFFFF; --surface-2: #FDE7F0; --surface-elev: #FFFFFF;
  --border: #F6D3E2; --border-strong: #A97F93; --divider: #FBE6EF;
  --text: #3A1027; --text-2: #6E3F57; --text-3: #7A5566; --text-on-primary: #FFFFFF;
  --primary: #C8175D; --primary-hover: #A8124E; --primary-soft: #FFE1EC;
  --accent: #B0185A; --accent-2: #7B4FC0;
  --success: #12733A; --warning: #8A5300; --danger: #B3261E; --info: #7B4FC0;
  --success-soft: #E6F4EA; --warning-soft: #FBEFD9; --danger-soft: #FDECEA; --info-soft: #F1E6FB;
  --bubble-out: #C8175D; --bubble-out-text: #FFFFFF; --bubble-in: #FFFFFF; --bubble-in-text: #3A1027; --bubble-in-border: #F6D3E2;
  --rail-bg: #4A1536; --rail-text: #F6D9E7; --rail-active-bg: #C8175D; --rail-active-text: #FFFFFF;
  --nav-bg: #FFFFFF; --nav-text: #7A5566; --nav-active: #C8175D; --focus-ring: #7B4FC0;
  --presence-online: #16A34A; --presence-away: #A86200; --unread-bg: #C8175D; --unread-text: #FFFFFF; --ticks-read-out: #FFD6E7;
  --shadow-1: 0 1px 2px rgba(74,21,54,.06), 0 1px 3px rgba(74,21,54,.05);
  --shadow-2: 0 6px 18px rgba(200,23,93,.12), 0 1px 3px rgba(74,21,54,.06);
  --shadow-3: 0 18px 44px rgba(122,16,64,.20);
  --av-1: #C8175D; --av-2: #7B4FC0; --av-3: #A3460A; --av-4: #0D6E66; --av-5: #9C2A8C; --av-6: #B0254F; --av-7: #6B4A9E; --av-8: #4A1536;
  --radius-m: 14px; --radius-l: 20px; --radius-xl: 26px;
  --btn-radius: 999px; --input-radius: 16px; --bubble-radius: 22px;
  --title-weight: 760;
  --btn-primary-bg: linear-gradient(135deg, #D81B6A, #B0185A);
  --onb-sky: #FFE9F2; --onb-card: #FFFFFF; --onb-soft: #FDE7F0; --onb-hint: #FFEFF5; --onb-sub: #F1E6FB;
  --deco-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M0 80 C90 56 180 96 270 70 S370 60 400 72 V120 H0z' fill='%23FDE1EC'/%3E%3Cg fill='%23F7A8C8'%3E%3Ccircle cx='60' cy='92' r='9'/%3E%3Ccircle cx='72' cy='84' r='9'/%3E%3Ccircle cx='84' cy='92' r='9'/%3E%3Ccircle cx='78' cy='104' r='9'/%3E%3Ccircle cx='66' cy='104' r='9'/%3E%3C/g%3E%3Ccircle cx='72' cy='96' r='5' fill='%23FFE7A3'/%3E%3Cg fill='%23E9B6F0'%3E%3Ccircle cx='310' cy='96' r='7'/%3E%3Ccircle cx='320' cy='89' r='7'/%3E%3Ccircle cx='330' cy='96' r='7'/%3E%3Ccircle cx='325' cy='106' r='7'/%3E%3Ccircle cx='315' cy='106' r='7'/%3E%3C/g%3E%3Ccircle cx='320' cy='98' r='4' fill='%23FFE7A3'/%3E%3C/svg%3E");
}
html[data-theme="rose"] .bubble.out { background: linear-gradient(135deg, #C8175D, #9E2F8E); }

/* 3 · DARK – nach Owner-Referenz: Fast-Schwarz, violetter Leuchtakzent, grüne Lesebestätigung */
html[data-theme="dark"] {
  color-scheme: dark;
  --heading: #F2F1F8;
  --bg: #15151C; --surface: #1D1D27; --surface-2: #262632; --surface-elev: #242431;
  --border: #2E2E3C; --border-strong: #6E6C86; --divider: #24242F;
  --text: #F2F1F8; --text-2: #B7B5C9; --text-3: #9896AE; --text-on-primary: #110C2E;
  --primary: #9D8CFF; --primary-hover: #B4A7FF; --primary-soft: #2A2547;
  --accent: #9D8CFF; --accent-2: #3DDC97;
  --success: #3DDC97; --warning: #F2B14C; --danger: #FF7A72; --info: #8FB6FF;
  --success-soft: #1C2A27; --warning-soft: #3A2A10; --danger-soft: #3A1E22; --info-soft: #2A2547;
  --bubble-out: #5B47E0; --bubble-out-text: #FFFFFF; --bubble-in: #262632; --bubble-in-text: #F2F1F8; --bubble-in-border: #2E2E3C;
  --rail-bg: #101016; --rail-text: #B7B5C9; --rail-active-bg: #5B47E0; --rail-active-text: #FFFFFF;
  --nav-bg: #1A1A23; --nav-text: #9896AE; --nav-active: #B4A7FF; --focus-ring: #B4A7FF;
  --presence-online: #3DDC97; --presence-away: #F2B14C; --unread-bg: #9D8CFF; --unread-text: #110C2E; --ticks-read-out: #3DDC97;
  --scrim: rgba(0, 0, 0, .6);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 6px 20px rgba(0,0,0,.5); --shadow-3: 0 18px 44px rgba(0,0,0,.65);
  --av-1: #5B47E0; --av-2: #135E57; --av-3: #6B2F8A; --av-4: #7F3608; --av-5: #8A1D3E; --av-6: #165470; --av-7: #3D5419; --av-8: #2E2A5C;
  --radius-l: 18px; --radius-xl: 24px; --bubble-radius: 20px; --btn-radius: 14px; --input-radius: 999px;
  --btn-primary-bg: linear-gradient(135deg, #A99BFF, #7C6BFF);
  --onb-sky: #2A2547; --onb-card: #1D1D27; --onb-soft: #262632; --onb-hint: #1C2A27; --onb-sub: #2A2547;
  --deco-band: radial-gradient(60% 80% at 80% 100%, rgba(91,71,224,.28), transparent 70%);
}
html[data-theme="dark"] .bubble.out { background: linear-gradient(135deg, #7C6BFF, #4A36C9); box-shadow: 0 6px 22px rgba(91,71,224,.35); }
html[data-theme="dark"] .btn-primary { box-shadow: 0 6px 24px rgba(124,107,255,.45); }

/* 4 · SENIOR – ruhig, große Schrift, große Bedienflächen, keine Animation (DEC-28: dieselben 5 Tabs, größer) */
html[data-theme="senior"] {
  color-scheme: light;
  --heading: #142B45;
  --bg: #F1F8EC; --surface: #FFFFFF; --surface-2: #E6F1E0; --surface-elev: #FFFFFF;
  --border: #CFE0C8; --border-strong: #5E7466; --divider: #E3EEDD;
  --text: #142B45; --text-2: #2E4152; --text-3: #3E5146; --text-on-primary: #FFFFFF;
  --primary: #1E7A34; --primary-hover: #17632A; --primary-soft: #DDE9D5;
  --accent: #1E7A34; --accent-2: #35546E;
  --success: #1E7A34; --warning: #7A4A00; --danger: #A61B13; --info: #35546E;
  --success-soft: #DDE9D5; --warning-soft: #FBEFD9; --danger-soft: #FDECEA; --info-soft: #DCEFFD;
  --bubble-out: #DDE9D5; --bubble-out-text: #142B45; --bubble-in: #FFFFFF; --bubble-in-text: #142B45; --bubble-in-border: #CFE0C8;
  --rail-bg: #1F3A2A; --rail-text: #E6F1E2; --rail-active-bg: #1E7A34; --rail-active-text: #FFFFFF;
  --nav-bg: #FFFFFF; --nav-text: #3E5146; --nav-active: #1E7A34; --focus-ring: #1D5FBF;
  --presence-online: #1E7A34; --presence-away: #7A4A00; --unread-bg: #1E7A34; --unread-text: #FFFFFF; --ticks-read-out: #1E7A34;
  --av-1: #1E7A34; --av-2: #35546E; --av-3: #6B4A9E; --av-4: #7A4A00; --av-5: #8A2A4A; --av-6: #1D5F7A; --av-7: #4F6B22; --av-8: #142B45;
  --fs-xs: .875rem; --fs-s: 1rem; --fs-m: 1.125rem; --fs-l: 1.25rem; --fs-xl: 1.5rem; --fs-xxl: 1.875rem; --lh: 1.5;
  --touch: 3.5rem; --btn-h: 3.75rem; --btn-radius: 18px; --input-radius: 16px; --fab-size: 4.25rem;
  --row-pad-y: 1rem; --nav-h: 4.75rem; --bubble-radius: 20px;
  --space-3: .875rem; --space-4: 1.25rem; --space-5: 1.5rem;
  --title-weight: 800; --title-tracking: 0;
  --rail-w-narrow: 6.5rem; --rail-w-wide: 16rem; --list-w: 24rem;
  --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms;
  --onb-sky: #DCEFFD; --onb-card: #FFFFFF; --onb-soft: #DDE9D5; --onb-hint: #D8F0EC; --onb-sub: #E9E3F5;
  --deco-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cpath d='M0 74 C80 52 170 88 250 66 S360 52 400 66 V120 H0z' fill='%23DDE9D5'/%3E%3Cpath d='M0 96 C100 80 210 108 310 90 S380 86 400 90 V120 H0z' fill='%23CBE0C2'/%3E%3C/svg%3E");
}
html[data-theme="senior"] .btn { font-weight: 750; }
html[data-theme="senior"] .bubble.out { border: 1px solid #C2D8B8; }
html[data-theme="senior"] .bubble.out .bubble-meta { color: #2E4152; }