/* ==================================================================
   nextparty24 - Gestaltungstokens, die EINE Quelle fuer alle Bereiche

   Geladen von der Webseite (header.php, vor style.css), vom Admin
   (adminlayout.php, vor admin.css) und vom Kundenbereich
   (accountlayout.php, vor admin.css und account.css).

   Regel (Design.md, "Bausteine" und "Schriftgroessen"): Werte fuer
   Schrift, Abstaende, Innenabstaende, Rundungen, Linien und Farben kommen
   nur von hier. Passt keine Stufe, die naechstliegende nehmen. Fehlt
   wirklich eine, sie HIER ergaenzen - nie als feste Zahl an einer Stelle
   und nie als Kopie in einem anderen Stylesheet.

   Das helle Farbschema des Admin- und Kundenbereichs ueberschreibt die
   Farben in admin.css (:root[data-farbschema="hell"]). Alles andere gilt
   in beiden Schemata.
   ================================================================== */

:root {
    /* ---------- Farben (dunkles Schema, Grundlage) ---------- */
    --color-bg: #08060b;
    --color-surface: #191320;
    --color-text: #f1f1f4;
    --color-divider: color-mix(in srgb, #f1f1f4 14%, transparent);

    --color-neutral-100: #f7f7f9;
    --color-neutral-200: #e6e6ea;
    --color-neutral-300: #c9c9d1;
    --color-neutral-400: #9d9da8;
    --color-neutral-500: #7b7b86;
    --color-neutral-600: #5c5c66;
    --color-neutral-700: #40404a;
    --color-neutral-800: #26262c;
    --color-neutral-900: #14141a;

    --color-accent: #d7f23a;
    --color-accent-200: #f3fbc9;
    --color-accent-300: #e4f78f;
    --color-accent-400: #ddf55f;
    --color-accent-500: #d7f23a;
    --color-accent-600: #b3cc1c;
    --color-accent-700: #849614;
    --color-accent-800: #4d580c;
    --color-accent-900: #293006;
    --color-on-accent: #15170a;     /* Schrift auf jeder Akzentflaeche */

    --color-accent2: #22e0d6;
    --color-accent2-200: #c8fbf7;
    --color-accent2-300: #9df5ef;
    --color-accent2-400: #4fe9e1;
    --color-accent2-600: #12b3ab;
    --color-accent2-700: #0e7f7a;
    --color-accent2-900: #06302f;

    --color-fehler: #ff7a5c;
    /* Zaehler-Kreis (neue Anfragen im Admin): kraeftiges Rot mit weisser
       Ziffer. --color-fehler ist fuer weisse Schrift zu hell (2,6:1). */
    --color-zaehler: #e5484d;
    --color-on-zaehler: #ffffff;
    --color-ok: #6ee7a8;
    --color-warnung: #f59a3c;
    --color-info: #5b9dff;
    --color-info-300: #b9d4ff;

    /* ---------- Schrift ---------- */
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--font-body);
    --font-display: "Expansiva", var(--font-heading);

    /* Schriftgroessen: nur diese Stufen. Fliesstext ist --text-base. */
    --text-xs:   12px;   /* Kleingedrucktes, Marken, Tabellenkoepfe */
    --text-sm:   14px;   /* Hinweise, Meta-Zeilen, Labels, Formularhilfen */
    --text-base: 16px;   /* Fliesstext, Knoepfe, Eingabefelder */
    --text-lg:   18px;   /* Einleitung (.np-lead), h4, FAQ-Fragen */
    --text-xl:   21px;   /* h3, grosse Kartentitel */
    --text-2xl:  28px;   /* h2, grosse Preise und Zitate */
    --text-3xl:  38px;   /* Kennzahlen */
    --text-h1:      clamp(28px, 3.4vw, 38px);
    --text-display: clamp(34px, 4.4vw, 54px);

    /* ---------- Abstaende und Innenabstaende ----------
       Fuer margin, padding, gap und Positionsabstaende. Die Luecken in
       der Zaehlung sind Absicht: es gibt nur die Stufen, die gebraucht
       werden. */
    --space-05: 2px;    /* feinster Abstand: eng gestapelte Symbole, Pillen-Innenrand */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    /* ---------- Rundungen ----------
       Eine Skala fuer Webseite, Admin und Kundenbereich. */
    --radius-xs:   4px;     /* Striche, kleine Marken */
    --radius-sm:   8px;     /* Etiketten, kleine Flaechen */
    --radius-md:   14px;    /* Knoepfe, Eingabefelder, Hinweise */
    --radius-lg:   20px;    /* Karten und Kaesten */
    --radius-pill: 999px;   /* Pillen: Reiter, Umschalter, Zaehler */

    /* ---------- Seitenbreite ----------
       Inhalt hoechstens so breit, mit diesem Rand zum Fensterrand. */
    --wrap: 1160px;
    --gutter: var(--space-6);

    /* ---------- Schatten ----------
       Nur fuer das, was wirklich ueber dem Rest schwebt: aufgeklapptes
       Menue, Wartefenster. Das helle Schema des Admins dreht sie in
       admin.css herunter. */
    --schatten-menue: 0 6px 20px rgba(0, 0, 0, .35);
    --schatten-warten: 0 8px 26px rgba(0, 0, 0, .4);

    /* ---------- Linien und Fokus ---------- */
    --linie: 1px solid var(--color-divider);
    --linie-stark: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
    --fokus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Auf dem Telefon ein schmalerer Seitenrand - sonst bleibt zwischen Rand,
   Karte und Zeile kaum Platz fuer den Inhalt. */
@media (max-width: 520px) {
    :root { --gutter: var(--space-4); }
}