/**
 * Majaa – zentrale Gestaltungswerte (Design-Tokens).
 *
 * Diese Datei ist die einzige Stelle, an der die Majaa-Markenfarben und
 * Schriften festgelegt werden. Alle Majaa-Plugins verwenden sie über
 * var(--majaa-color-…) und var(--majaa-font-…).
 * Eine Änderung hier wirkt auf jede Stelle, die den jeweiligen Wert nutzt.
 *
 * Wird von Majaa Core auf allen Frontend-Seiten geladen (auch für Gäste).
 * Werte nach dem Majaa-Designsystem (Stand 05.11.2026).
 *
 * Umschaltpunkte (in Media Queries keine Variablen möglich, deshalb hier als Regel):
 *   Handy    bis 599.98px   @media (max-width: 599.98px)
 *   Tablet   600 – 1099.98  @media (min-width: 600px) and (max-width: 1099.98px)
 *   Desktop  ab 1100px      @media (min-width: 1100px)   – Seitenleiste, keine Leiste unten
 *   Breit    ab 1400px      @media (min-width: 1400px)
 * Zusätzlich nur bei Bedarf: sehr schmale Handys bis 359.98px.
 * Ältere Dateien nutzen noch Zwischenwerte (480, 560, 680, 900 …); sie werden beim
 * Überarbeiten der jeweiligen Seite auf diese Stufen umgestellt.
 */
:root {
	/* Schriften (Designsystem: Überschriften Playfair Display, Fließtext Nunito Sans) */
	--majaa-font-body: 'Nunito Sans', Arial, sans-serif;
	--majaa-font-heading: 'Playfair Display', Georgia, serif;

	/* Text und Icons – Aubergine (Designsystem: alle Texte und alle Icons) */
	--majaa-color-ink: #39303c;
	--majaa-color-text: #625766;         /* Grau-Lila: Zeitangaben, Hinweise (nur auf hellen Flächen) */

	/* Gold – Akzent statt Braun */
	--majaa-color-warm: #dbb981;         /* Gold: Hauptbuttons, Tagesfrage-Karte */
	--majaa-color-gold-dark: #c9a86e;    /* Gold dunkel: Ränder, Hover, gestrichelte Rahmen, aktiver Filter */
	--majaa-color-gold-soft: #b29a6f;    /* Lotus- und Galerie-Gold */
	--majaa-color-gold: #ad8c50;         /* nur Fotoansicht (abgenommene Gestaltung, unverändert) */

	/* Seitenhintergrund – Perlweiß (Designsystem, entschieden 31.10.2026) */
	--majaa-color-page: #fbf9f5;         /* Grund der Seite und Kopfleiste */
	--majaa-color-page-top: var(--majaa-color-page); /* Logo-Fläche, folgt dem Grund */

	/* Flächen */
	--majaa-color-sage: #e6ebe6;         /* Salbei hell: Module, Kopf der Seitenleiste */
	--majaa-color-card: #fffdf9;         /* Karte: Seitenleiste, Beiträge, Chips auf Salbei */
	--majaa-color-paper: #fffdfa;        /* warmes Weiß (älterer Wert, entspricht Karte) */
	--majaa-color-cream: #f2e9d8;        /* helle Aktionsfläche */

	/* Auswahl – Lila (Interessen-Chips) */
	--majaa-color-lilac-soft: #e9e1f0;   /* nicht ausgewählt */
	--majaa-color-lilac: #6e4a80;        /* ausgewählt, weiße Schrift */

	/* Signalfarben */
	--majaa-color-heart: #9b111e;        /* nur das gefüllte „Gefällt mir“-Herz */
	--majaa-color-error: #d9534f;        /* Rahmen und Symbol bei Fehlern */
	--majaa-color-error-text: #b23b37;   /* Fehlertext */

	/* Buttons (Designsystem „Button-Maße – gelten für jeden Button“, 31.10.2026).
	 * Der Baustein dazu steht in button.css (.majaa-ui-button). */
	--majaa-button-height: 44px;         /* Mindesthöhe = Berührungsfläche */
	--majaa-button-radius: 14px;         /* Rundung, für alle Buttons gleich */
	--majaa-button-padding-x: 16px;      /* Innenabstand links und rechts */
	--majaa-button-gap: 8px;             /* Abstand Icon – Schrift */
	--majaa-button-spacing: 12px;        /* Abstand zwischen zwei Buttons nebeneinander */
	--majaa-button-icon: 20px;           /* Icon-Größe */
	--majaa-button-font-size: 16px;
	--majaa-button-shadow: 0 2px 8px rgb(57 48 60 / 14%);  /* Haupt- und Zweitbutton */
	--majaa-button-border: var(--majaa-color-gold-dark);
	--majaa-button-primary-bg: var(--majaa-color-warm);    /* Hauptbutton Gold */
	--majaa-button-secondary-bg: var(--majaa-color-card);  /* Zweitbutton Karte */
	--majaa-button-glass-bg: rgb(255 253 249 / 72%);       /* Glas-Button auf Fotos */
	--majaa-button-glass-bg-hover: rgb(255 253 249 / 88%);
	--majaa-button-glass-border: rgb(255 255 255 / 55%);
	--majaa-button-glass-blur: blur(8px) saturate(1.1);

	/* Karten (Designsystem „Karte“: warmes Weiß, feine Linie, weicher Schatten) */
	--majaa-card-bg: var(--majaa-color-card);
	--majaa-card-border: #eae4d9;
	--majaa-card-radius: 18px;
	--majaa-card-padding: 24px;
	--majaa-card-shadow: 0 2px 14px rgb(57 48 60 / 6%);

	/* Avatare (Designsystem: immer rund; Größen 24/36/48/64/96; Stil 1 „Schlicht“).
	 * Feiner Schatten erst ab 48 px – bei 24/36 wirkt er wie ein grauer Fleck. */
	--majaa-avatar-shadow: 0 1px 4px rgb(57 48 60 / 16%);
	--majaa-avatar-online: #7e8f5a;      /* Oliv: gerade online */

	/* Dialoge (Popups): Karte mit stärkerem Schatten über abgedunkeltem Grund */
	--majaa-dialog-width: 520px;
	--majaa-dialog-padding: 24px;
	--majaa-dialog-radius: var(--majaa-card-radius);
	--majaa-dialog-bg: var(--majaa-color-card);
	--majaa-dialog-border: var(--majaa-card-border);
	--majaa-dialog-shadow: 0 16px 48px rgb(57 48 60 / 20%);
	--majaa-dialog-backdrop: rgb(57 48 60 / 45%);
	--majaa-dialog-title-size: 26px;

	/* Meldungen (Hinweis, Erfolg, Achtung, Fehler) und kurze Einblendungen (Toast) */
	--majaa-notice-radius: var(--majaa-field-radius);
	--majaa-notice-padding: 12px 16px;
	--majaa-notice-info-bg: var(--majaa-color-sage);
	--majaa-notice-info-border: #d3dcd2;
	--majaa-notice-success-bg: var(--majaa-color-sage);
	--majaa-notice-success-border: #b9c8b5;
	--majaa-notice-warning-bg: #f8f0e1;
	--majaa-notice-warning-border: var(--majaa-color-gold-soft);
	--majaa-notice-error-bg: #fbeeed;
	--majaa-notice-error-border: var(--majaa-color-error);
	--majaa-toast-shadow: 0 6px 24px rgb(57 48 60 / 20%);

	/* Formularfelder: gleiche Rundung wie Buttons (Designsystem 31.10.2026,
	 * „Bedienelemente gleicher Höhe teilen eine Rundung“). Ausnahme bewusst:
	 * Kommentarfeld am Handy und Tagesfrage-Antwort als runde Pille. */
	--majaa-field-radius: var(--majaa-button-radius);
	--majaa-field-height: 44px;          /* gleich hoch wie Buttons, damit sie nebeneinander passen */
	--majaa-field-padding-x: 14px;
	--majaa-field-font-size: 16px;       /* 16 px: kein automatisches Zoomen auf dem iPhone */
	--majaa-field-label-size: 15px;      /* Beschriftung über dem Feld, fett */
	--majaa-field-bg: #fff;
	--majaa-field-border: #d9d3c6;
	--majaa-field-border-focus: var(--majaa-color-gold-dark);
	--majaa-field-shadow: inset 0 1px 2px rgb(57 48 60 / 8%);   /* Feld wirkt eingelassen */
	--majaa-field-glow: 0 0 0 3px rgb(219 185 129 / 30%);       /* feiner goldener Schein beim Tippen */

	/* Abstände – eine Stufenleiter für alle Innen- und Außenabstände (05.11.2026) */
	--majaa-space-1: 4px;    /* eng zusammengehörig: Name und Ort */
	--majaa-space-2: 8px;    /* Icon – Schrift, Chips untereinander */
	--majaa-space-3: 12px;   /* zwischen Buttons, Überschrift – Inhalt */
	--majaa-space-4: 16px;   /* Innenabstand kleiner Flächen, Handy-Rand */
	--majaa-space-5: 24px;   /* Innenabstand Karte, zwischen Feldern */
	--majaa-space-6: 32px;   /* zwischen Bereichen einer Seite */
	--majaa-space-7: 48px;   /* großer Abschnittsabstand */
	--majaa-space-8: 64px;   /* Seitenabstände Desktop */

	/* Schriftgrößen – Handy zuerst; ab 600 px die Desktop-Werte (unten) */
	--majaa-text-h1: 30px;        /* Seitentitel, einmal pro Seite */
	--majaa-text-h1-line: 36px;
	--majaa-text-h2: 24px;        /* Abschnitt */
	--majaa-text-h2-line: 30px;
	--majaa-text-h3: 19px;        /* Kartentitel, Namen */
	--majaa-text-h3-line: 26px;
	--majaa-text-body: 16px;      /* Fließtext, Felder (mind. 16 px wegen iPhone-Zoom) */
	--majaa-text-body-line: 26px;
	--majaa-text-small: 14px;     /* Zeit, Zähler, Hinweise */
	--majaa-text-small-line: 20px;
	--majaa-text-label: 12px;     /* Kennzeichnung in Versalien */
	--majaa-text-tab: 11px;       /* Beschriftung der Leiste unten */

	/* Zähler-Plakette (Glocke, Neue Anfragen) */
	--majaa-badge-bg: var(--majaa-color-lilac);
	--majaa-badge-color: #fff;
	--majaa-badge-size: 18px;
}
@media (min-width: 600px) {
	:root {
		--majaa-text-h1: 40px;
		--majaa-text-h1-line: 48px;
		--majaa-text-h2: 28px;
		--majaa-text-h2-line: 36px;
		--majaa-text-h3: 21px;
		--majaa-text-h3-line: 28px;
	}
}