/*
 * np-tokens.css — Cross-cutting Mobile-First Design-Tokens (Phase A).
 *
 * Stellt CSS-Custom-Properties bereit, die Phase B–G konsumieren:
 * Spacing, Touch-Target-Mindestmaß, Font-Skala, Safe-Area-Insets,
 * Standard-Breakpoint. Mobile-first: Werte hier sind die Default-Werte
 * für <= 720 px, der einzelne @media-Block (>= 721 px) skaliert nach oben.
 *
 * WICHTIG: Diese Datei MUSS vor nicer.css eingebunden werden, damit
 * spätere Phasen die Tokens via var(--np-*) referenzieren können.
 */
:root {
    /* Spacing — mobile first; größere Breakpoints überschreiben gezielt. */
    --np-space-1: 4px;
    --np-space-2: 8px;
    --np-space-3: 12px;
    --np-space-4: 16px;   /* default-Block-Padding mobile */
    --np-space-5: 24px;   /* default-Block-Padding desktop */
    --np-space-6: 32px;
    --np-space-7: 48px;

    /* Touch-Target Minimum: WCAG 2.5.5 = 44x44 css px. */
    --np-tap-min: 44px;

    /*
     * Font-Skala — body NIE unter 14px auf mobile,
     * Inputs IMMER >= 16px (verhindert iOS-Safari-Auto-Zoom bei Focus).
     */
    --np-font-body: 15px;
    --np-font-input: 16px;
    --np-font-small: 13px;
    --np-font-mono-small: 11px;
    --np-font-h1-mobile: clamp(24px, 6vw, 32px);
    --np-font-h1-desktop: clamp(32px, 3vw, 48px);

    /* Safe-Area-Insets — iPhone-Notch, Android-Gesture-Bar. */
    --np-safe-top: env(safe-area-inset-top, 0px);
    --np-safe-right: env(safe-area-inset-right, 0px);
    --np-safe-bottom: env(safe-area-inset-bottom, 0px);
    --np-safe-left: env(safe-area-inset-left, 0px);

    /*
     * Standard-Breakpoint — überall im Code dieselbe Zahl, statt
     * 480/520/720/960 wild gestreut. Phasen B-G nutzen 720px konsequent.
     */
    --np-bp-mobile: 720px;
}

@media (min-width: 721px) {
    :root {
        --np-font-body: 16px;
    }
}