/*
    peoplegrid Design-Tokens (Umsetzungsplan 11.2).

    Die Werte stammen unverändert aus dem freigegebenen Design-System "Nocturne"
    (_ds/nocturne-.../styles.css) und den .dc.html-Prototypen. Es wird bewusst keine
    neue Designsprache eingeführt (Umsetzungsplan 48).

    Namensraum: Der Umsetzungsplan schreibt die Präfixe --pg-color-*, --pg-font-*,
    --pg-space-*, --pg-radius-*, --pg-shadow-*, --pg-z-* und --pg-motion-* vor. Die
    Tokens des Design-Systems (--color-*, --space-*, …) bleiben als Alias bestehen,
    damit aus den Prototypen übernommenes Markup unverändert funktioniert. Neue
    Komponenten verwenden ausschließlich die --pg-*-Tokens.

    Keine Seite darf eine Rohfarbe erfinden, solange ein Token passt (Umsetzungsplan 11.2).
*/

:root {
    /* ── Farben: Grundflächen und Text ───────────────────────────────── */
    --pg-color-bg: #161826;
    --pg-color-surface: #232532;
    --pg-color-text: #e9e9ed;
    --pg-color-accent: #9184d9;
    --pg-color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

    /* ── Tonwertreihen (OKLCH-abgeleitet, gemeinsame Helligkeitsskala) ── */
    --pg-color-neutral-100: #f3f5fe;
    --pg-color-neutral-200: #e4e7f5;
    --pg-color-neutral-300: #cfd3e5;
    --pg-color-neutral-400: #b2b6ca;
    --pg-color-neutral-500: #9397ab;

    /*
        Phase 13: von #75798c auf #898d9d angehoben.

        Diese Stufe wird ausschließlich für Text und Symbole verwendet – Platzhalter in
        Feldern, erläuternde Zeilen, noch nicht verlinkte Navigationseinträge, die Tastenhilfe
        der Suche. Auf den beiden Grundflächen der Anwendung ergab der alte Wert 4,08:1
        (Seitengrund) und 3,52:1 (Karte) und verfehlte damit die geforderten 4,5:1
        (Umsetzungsplan 44). Der neue Wert liegt bei 5,33:1 und 4,60:1.

        Der Ton bleibt derselbe, nur die Helligkeit steigt – gerade so weit, dass die
        Abstufung zu --pg-color-neutral-500 (6,08:1 / 5,25:1) erhalten bleibt und der
        zurückgenommene Charakter dieser Stufe nicht verloren geht. Ein E2E-Test misst den
        tatsächlichen Kontrast an der gerenderten Seite und schlägt fehl, wenn er wieder
        darunter fällt.
    */
    --pg-color-neutral-600: #898d9d;
    --pg-color-neutral-700: #595d6c;
    --pg-color-neutral-800: #3f424d;
    --pg-color-neutral-900: #292b31;

    --pg-color-accent-100: #f5f4ff;
    --pg-color-accent-200: #e7e5fe;
    --pg-color-accent-300: #d2cefd;
    --pg-color-accent-400: #b5abfc;
    --pg-color-accent-500: #968ae0;
    --pg-color-accent-600: #796cbf;
    --pg-color-accent-700: #5d5294;
    --pg-color-accent-800: #423a6a;
    --pg-color-accent-900: #2b2741;

    /*
        Statusfarben.

        Das Design-System ist bewusst monochrom: Status wird über die Akzent- und
        Neutralreihen und zusätzlich über Text und Symbol vermittelt, niemals über Farbe
        allein (Umsetzungsplan 44). Für Fehlermeldungen ist ein eigener, gedämpfter Rotton
        nötig, weil sich "kritisch" sonst nicht von "normal" unterscheiden lässt.
    */
    --pg-color-danger: #e2808a;
    --pg-color-danger-surface: #3a2129;
    --pg-color-danger-border: color-mix(in srgb, #e2808a 45%, transparent);
    --pg-color-success: #86c6a4;
    --pg-color-success-surface: #1f3029;

    /* ── Typografie ──────────────────────────────────────────────────── */
    --pg-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pg-font-heading-weight: 500;
    --pg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ── Abstände (Dichte 0,70×, bewusst kompakt) ────────────────────── */
    --pg-space-1: 2.8px;
    --pg-space-2: 5.6px;
    --pg-space-3: 8.4px;
    --pg-space-4: 11.2px;
    --pg-space-6: 16.8px;
    --pg-space-8: 22.4px;

    /* ── Radien ──────────────────────────────────────────────────────── */
    --pg-radius-sm: 4px;
    --pg-radius-md: 8px;
    --pg-radius-lg: 14px;

    /* ── Elevation: auf dunklem Grund Kante plus Umgebungsdunkel ─────── */
    --pg-shadow-sm: 0 0 0 1px #3f424d;
    --pg-shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
    --pg-shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);

    /* ── Ebenen ──────────────────────────────────────────────────────── */
    --pg-z-sticky: 100;
    --pg-z-drawer: 200;
    --pg-z-modal: 300;
    --pg-z-toast: 400;

    /* ── Bewegung ────────────────────────────────────────────────────── */
    --pg-motion-fast: 120ms;
    --pg-motion-base: 180ms;
    --pg-motion-slow: 280ms;
    --pg-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* ── Aliasse des Design-Systems ──────────────────────────────────── */
    --color-bg: var(--pg-color-bg);
    --color-surface: var(--pg-color-surface);
    --color-text: var(--pg-color-text);
    --color-accent: var(--pg-color-accent);
    --color-divider: var(--pg-color-divider);

    --color-neutral-100: var(--pg-color-neutral-100);
    --color-neutral-200: var(--pg-color-neutral-200);
    --color-neutral-300: var(--pg-color-neutral-300);
    --color-neutral-400: var(--pg-color-neutral-400);
    --color-neutral-500: var(--pg-color-neutral-500);
    --color-neutral-600: var(--pg-color-neutral-600);
    --color-neutral-700: var(--pg-color-neutral-700);
    --color-neutral-800: var(--pg-color-neutral-800);
    --color-neutral-900: var(--pg-color-neutral-900);

    --color-accent-100: var(--pg-color-accent-100);
    --color-accent-200: var(--pg-color-accent-200);
    --color-accent-300: var(--pg-color-accent-300);
    --color-accent-400: var(--pg-color-accent-400);
    --color-accent-500: var(--pg-color-accent-500);
    --color-accent-600: var(--pg-color-accent-600);
    --color-accent-700: var(--pg-color-accent-700);
    --color-accent-800: var(--pg-color-accent-800);
    --color-accent-900: var(--pg-color-accent-900);

    --font-heading: var(--pg-font-heading);
    --font-heading-weight: var(--pg-font-heading-weight);
    --font-body: var(--pg-font-body);

    --space-1: var(--pg-space-1);
    --space-2: var(--pg-space-2);
    --space-3: var(--pg-space-3);
    --space-4: var(--pg-space-4);
    --space-6: var(--pg-space-6);
    --space-8: var(--pg-space-8);

    --radius-sm: var(--pg-radius-sm);
    --radius-md: var(--pg-radius-md);
    --radius-lg: var(--pg-radius-lg);

    --shadow-sm: var(--pg-shadow-sm);
    --shadow-md: var(--pg-shadow-md);
    --shadow-lg: var(--pg-shadow-lg);

    /*
        Das Design-System ist ausschließlich für den dunklen Grund entworfen.
        color-scheme verhindert, dass der Browser Formularelemente hell einfärbt.
    */
    color-scheme: dark;
}