/* =========================================================
   Schütz-App — Farbthemen

   Ein Block pro Theme, ausser dem Standard: "Modern Dark Glassmorph"
   lebt in :root von styles.css. Jeder Block unten setzt alle Variablen
   aus THEME_TOKENS (public/themes.js) und ueberschreibt damit den Standard.
   ========================================================= */

/* ---------------------------------------------------------
   Gen X Soft Club
   Helles Milchglas, Himmelblau und Salbei auf kuehlem Alabaster. Orientiert
   sich am Farbthema des Mockups (#F2F5F7, #E3E8EC, #2B353E, #5B9BD5, #8FA89B,
   #D9C5B2, #E6A15C); Blau und Salbei sind etwas dunkler, damit Buttons, Links
   und Schrift lesbar bleiben (siehe test/themeContrast.test.js).
   --------------------------------------------------------- */
html[data-theme='soft-club'] {
  color-scheme: light;

  --color-background: #f2f5f7;
  --color-background-elevated: #ffffff;
  --color-background-muted: #e3e8ec;
  --color-border: #c9d2da;
  --color-text: #2b353e;
  --color-text-muted: #53606b;
  --color-text-disabled: #54616c;

  --color-highlight-1: #2b6099;
  --color-highlight-1-hover: #245386;
  --color-highlight-1-active: #1d4670;
  --color-highlight-1-text: #245386;
  --color-primary: #2b6099;
  --color-primary-hover: #245386;
  --color-highlight-2: #3f6a58;
  --color-highlight-2-hover: #355a4a;
  --color-highlight-2-active: #2c4c3e;
  --color-highlight-2-text: #27493b;
  --color-on-highlight: #ffffff;
  --color-on-status: #2b353e;
  --color-on-avatar: #1f2a33;
  --color-error: #b3261e;
  --color-warning: #e6a15c;
  --color-info: #7fb2e0;

  --surface-glass: rgba(255, 255, 255, 0.68);
  --chrome-glass: rgba(242, 245, 247, 0.78);
  --glass-border: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 2px 6px rgba(43, 53, 62, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-md: 0 6px 18px rgba(43, 53, 62, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-lg: 0 12px 32px rgba(43, 53, 62, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --gloss-surface: none;
  --gloss-chrome: none;
  --gloss-button: none;
  --gloss-button-secondary: none;
  --shadow-button: none;
  --scrim: rgba(43, 53, 62, 0.45);
  --ring-on-page: rgba(242, 245, 247, 0.95);
  --text-shadow-on-page: none;
  --wash-subtle: rgba(43, 53, 62, 0.25);
  --wash-strong: rgba(43, 53, 62, 0.25);

  --radius-md: 12px;
  --radius-lg: 18px;

  --page-bg-color: #e9eef2;
  --page-bg-image:
    radial-gradient(circle at 12% 8%, rgba(91, 155, 213, 0.16) 0%, rgba(91, 155, 213, 0) 38%),
    radial-gradient(circle at 88% 38%, rgba(143, 168, 155, 0.2) 0%, rgba(143, 168, 155, 0) 40%),
    radial-gradient(circle at 30% 92%, rgba(217, 197, 178, 0.3) 0%, rgba(217, 197, 178, 0) 42%),
    linear-gradient(135deg, #e3e8ec 0%, #f2f5f7 50%, #dce7f0 100%);
}

/* ---------------------------------------------------------
   Frutiger Aero
   Vista/7-Gefuehl: weicher Verlauf von Gruen/Tuerkis nach Himmelblau,
   glaenzende Glaskarten und Perlmutt-Knoepfe, dunkelblaue Schrift. Das
   Farbthema stammt aus dem Mockup (#00A8FF, #2CE67F, #7CE8FF, #FFB800); Blau
   und Gruen sind dunkler abgestimmt, damit Schrift und Knoepfe lesbar bleiben
   (siehe test/themeContrast.test.js). Der Glanz liegt als Bildebene auf den
   Flaechen (--gloss-*), nicht als Pseudo-Element.
   --------------------------------------------------------- */
html[data-theme='frutiger-aero'] {
  color-scheme: light;

  --color-background: #eef8ff;
  --color-background-elevated: #fbfeff;
  --color-background-muted: #d4ecfa;
  --color-border: #a9cde6;
  --color-text: #06263b;
  --color-text-muted: #103a55;
  --color-text-disabled: #113b56;

  --color-highlight-1: #07529e;
  --color-highlight-1-hover: #064a92;
  --color-highlight-1-active: #053d78;
  --color-highlight-1-text: #043769;
  --color-primary: #07529e;
  --color-primary-hover: #064a92;
  --color-highlight-2: #0e7a48;
  --color-highlight-2-hover: #0b6a3e;
  --color-highlight-2-active: #095a35;
  --color-highlight-2-text: #0a5c37;
  --color-on-highlight: #ffffff;
  --color-on-status: #06263b;
  --color-on-avatar: #06263b;
  --color-error: #a01f25;
  --color-warning: #ffb800;
  --color-info: #5bb8f5;

  --surface-glass: rgba(235, 248, 255, 0.62);
  --chrome-glass: rgba(235, 248, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 4px 12px rgba(0, 40, 80, 0.22), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  --shadow-md: 0 8px 22px rgba(0, 40, 80, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  --shadow-lg: 0 14px 36px rgba(0, 30, 70, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.95);

  --gloss-surface:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 22%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(215, 244, 255, 0.25) 55%, rgba(170, 230, 255, 0.4) 100%);
  --gloss-chrome: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 49%, rgba(168, 224, 255, 0.22) 50%, rgba(255, 255, 255, 0.4) 100%);
  --gloss-button: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 49%, rgba(0, 30, 80, 0.12) 50%, rgba(255, 255, 255, 0.06) 100%);
  --gloss-button-secondary: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(235, 248, 255, 0.85) 49%, rgba(205, 232, 248, 0.85) 50%, rgba(240, 251, 255, 0.95) 100%);
  --shadow-button: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(0, 100, 200, 0.4);

  --scrim: rgba(2, 27, 51, 0.5);
  --ring-on-page: rgba(255, 255, 255, 0.85);
  --text-shadow-on-page: 0 0 6px rgba(255, 255, 255, 0.55);
  --wash-subtle: rgba(6, 38, 59, 0.3);
  --wash-strong: rgba(6, 38, 59, 0.3);

  --radius-md: 10px;
  --radius-lg: 14px;

  --page-bg-color: #58b9f2;
  --page-bg-image:
    radial-gradient(circle at 12% 8%, rgba(110, 255, 190, 0.55) 0%, rgba(110, 255, 190, 0) 45%),
    radial-gradient(circle at 85% 40%, rgba(60, 225, 230, 0.5) 0%, rgba(60, 225, 230, 0) 45%),
    radial-gradient(circle at 30% 95%, rgba(30, 125, 215, 0.22) 0%, rgba(30, 125, 215, 0) 50%),
    linear-gradient(160deg, #7af7cd 0%, #45dcd8 35%, #58b9f2 70%, #5ab4ee 100%);
}

/* Einzelregeln fuer Frutiger Aero: Auf dem Verlauf haben freie Fehlertexte und das
   Admin-Badge keinen Grund, auf dem sie lesbar waeren; sie bekommen eine helle Flaeche. */
html[data-theme='frutiger-aero'] .error-text {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88);
}

html[data-theme='frutiger-aero'] .role-badge.admin {
  background: color-mix(in srgb, var(--color-highlight-2) 30%, var(--color-background-elevated));
}

/* ---------------------------------------------------------
   Windows XP Luna
   Himmel mit Wolkentupfern und verwischte Wiese als reiner CSS-Verlauf, blaue
   Kopf- und Taskleiste, beige Karten mit blauer Kante, gruene Hauptknoepfe.
   Das Farbthema stammt aus dem Mockup (#ECE9D8, #0054E3, #3C9A1E, #7A96DF,
   #FF9900); Gruen und Blau sind fuer die Lesbarkeit abgestimmt (siehe
   test/themeContrast.test.js).
   --------------------------------------------------------- */
html[data-theme='xp-luna'] {
  color-scheme: light;

  --color-background: #ffffff;
  --color-background-elevated: #ece9d8;
  --color-background-muted: #d4d0c8;
  --color-border: #7f9db9;
  --color-text: #0a1f33;
  --color-text-muted: #173246;
  --color-text-disabled: #1c3a52;

  --color-highlight-1: #0a4fc4;
  --color-highlight-1-hover: #0843a8;
  --color-highlight-1-active: #06358a;
  --color-highlight-1-text: #052a63;
  --color-primary: #236610;
  --color-primary-hover: #1b590c;
  --color-highlight-2: #2d7d12;
  --color-highlight-2-hover: #26690f;
  --color-highlight-2-active: #1f570c;
  --color-highlight-2-text: #1b520b;
  --color-on-highlight: #ffffff;
  --color-on-status: #0a1f33;
  --color-on-avatar: #0a1f33;
  --color-error: #b3261e;
  --color-warning: #ff9900;
  --color-info: #7a96df;

  --surface-glass: rgba(236, 233, 216, 1);
  --chrome-glass: rgba(10, 88, 224, 1);
  --glass-border: #0a4fc4;
  --shadow-sm: 2px 3px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 2px 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 3px 6px 18px rgba(0, 0, 0, 0.4);

  --gloss-surface: none;
  --gloss-chrome: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 40, 0.25) 100%);
  --gloss-button: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.18) 49%, rgba(0, 40, 0, 0.12) 50%, rgba(255, 255, 255, 0.06) 100%);
  --gloss-button-secondary: linear-gradient(180deg, #ffffff 0%, #f3f2ea 80%, #dedcd0 100%);
  --shadow-button: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 2px 3px rgba(0, 0, 0, 0.25);

  --scrim: rgba(0, 20, 60, 0.5);
  --ring-on-page: rgba(255, 255, 255, 0.9);
  --text-shadow-on-page: 0 0 6px rgba(255, 255, 255, 0.6);
  --wash-subtle: rgba(10, 31, 51, 0.3);
  --wash-strong: rgba(10, 31, 51, 0.3);

  --radius-md: 6px;
  --radius-lg: 8px;

  --page-bg-color: #86c1f7;
  --page-bg-image:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 30% 11%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 82% 26%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 70% 22%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 20% 88%, rgba(150, 230, 80, 0.6) 0%, rgba(150, 230, 80, 0) 45%),
    radial-gradient(circle at 85% 80%, rgba(90, 170, 40, 0.2) 0%, rgba(90, 170, 40, 0) 45%),
    linear-gradient(180deg, #5fa9f2 0%, #86c1f7 30%, #b4dcfb 46%, #a6e464 62%, #7ccb3d 78%, #66b82e 100%);
}

/* Einzelregeln fuer Windows XP Luna: Kopfleiste, Taskleiste und Dialogkopf sind blau mit
   weisser Schrift. Die lokalen Farb-Variablen gelten nur dort; "color" muss neu gesetzt
   werden, weil der Body seine Farbe schon aufgeloest vererbt. */
html[data-theme='xp-luna'] :is(.app-header, .tab-bar, .modal-head) {
  --color-text: #ffffff;
  --color-text-muted: #e9f0ff;
  --color-text-disabled: #d6e4ff;
  --color-highlight-1: #ffffff;
  color: var(--color-text);
  background-color: var(--chrome-glass);
  background-image: var(--gloss-chrome);
}

html[data-theme='xp-luna'] :is(.app-header, .tab-bar, .modal-head) .icon-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Die Marke nutzt sonst die (hier weisse) Akzentfarbe als Grund und waere unsichtbar. */
html[data-theme='xp-luna'] .app-header .brand-dot {
  background: #ffffff;
  color: #0a4fc4;
}

html[data-theme='xp-luna'] .tab.active {
  border-radius: 4px;
  background: rgba(0, 0, 40, 0.28);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.45);
}

html[data-theme='xp-luna'] .tab.active::before {
  display: none;
}

html[data-theme='xp-luna'] :is(.card, .auth-card, .composer, .celebration-tile, .brew-tile, .friend-tile) {
  border-width: 2px;
}

/* Auf dem Handy ist der Dialog ein Bodenblatt ohne untere Kante, ab 640 px steht er frei. */
html[data-theme='xp-luna'] .modal-sheet {
  border-width: 2px 2px 0;
  border-color: var(--color-highlight-1);
}

@media (min-width: 640px) {
  html[data-theme='xp-luna'] .modal-sheet {
    border-width: 2px;
  }
}

html[data-theme='xp-luna'] :is(.button, .reaction-button, .segmented, .segmented button, .chip, .checkin-friend, .checkin-mark) {
  border-radius: 5px;
}

html[data-theme='xp-luna'] .error-text {
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.88);
}

html[data-theme='xp-luna'] .role-badge.admin {
  background: color-mix(in srgb, var(--color-highlight-2) 30%, var(--color-background-elevated));
}