/*
 * Globales Token-System für alle Designs (Bombast, Antamar, Pergament, Classic, Simple).
 *
 * Steuert Mobile-Touch-Targets, Safe-Areas, fluide Mobile-Schriftgrößen,
 * Spacing/Motion-Skalen und z-Index-Schichten.
 * Wird vor antamarGeneralv57.css geladen, damit alle nachfolgenden Stylesheets
 * die Custom Properties konsumieren können.
 */
:root {
    /* Touch & Sizing */
    --touch-target-min: 44px;       /* WCAG / Apple HIG Minimum */
    --touch-target-comfort: 48px;   /* Material Design Empfehlung */

    /* iOS Safe Areas (Notch / Home-Indicator) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Mobile-Bar Höhen — werden auch in JS gelesen via getComputedStyle.
       Werte sind so gewählt, dass body padding-top/-bottom exakt die
       tatsächliche Bar-Höhe abdeckt; sonst überlappt die Bar den
       Spielinhalt (Icon 3em + Label + Border + Padding ≈ 75px). */
    --mobile-topbar-height: 3.4em;
    --mobile-bottombar-height: 4.7em;

    /* Fluide Mobile-Schriftgrößen (clamp = sanftes Skalieren statt Sprung) */
    --mobile-font-base: clamp(15px, 4.2vw, 18px);
    --mobile-font-h1:   clamp(20px, 5.5vw, 28px);
    --mobile-font-h2:   clamp(17px, 4.8vw, 22px);
    --mobile-font-h3:   clamp(15px, 4.2vw, 18px);
    --mobile-line-height: 1.45;

    /* Spacing-Skala */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Bewegung */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* Z-Index-Skala */
    --z-fab: 50;
    --z-mobile-bar: 1000;
    --z-modal: 5000;
    --z-tooltip: 5500;
    --z-toast: 6000;

    /*
     * Mobile-Farben (Bombast-Defaults).
     * Werden pro Skin in css/{skin}/antamarv41.css via :root überschrieben.
     * antamarGeneralv57.css referenziert nur die Tokens, nicht die Hardcodes —
     * so erbt jeder Skin automatisch sein eigenes Mobile-Look-and-Feel.
     */
    /* Surfaces (Drawer, Top-Bar, Backdrop, Game-Container, Quick-Links) */
    --mobile-surface:          rgba(20, 15, 10, 0.97);
    --mobile-surface-2:        rgba(48, 36, 18, 0.6);
    --mobile-surface-2-hover:  rgba(70, 54, 26, 0.8);
    --mobile-surface-overlay:  rgba(0, 0, 0, 0.5);
    --mobile-body-bg:          rgb(30, 30, 30);
    --mobile-hint-bg:          rgba(40, 30, 20, 0.95);

    /* Borders */
    --mobile-border:           rgba(193, 171, 73, 0.5);
    --mobile-border-soft:      rgba(193, 171, 73, 0.35);
    --mobile-border-very-soft: rgba(193, 171, 73, 0.15);

    /* Text-Skala */
    --mobile-text:             #fef1b9;
    --mobile-text-secondary:   #e0d4a0;
    --mobile-text-soft:        #cdbf86;
    --mobile-text-muted:       #9b8c4d;

    /* Accent (Hamburger, Drawer-Titel, aktive Tabs, Focus-Outline) */
    --mobile-accent:           #c1ab49;
    --mobile-accent-strong:    #cca935;
    --mobile-accent-contrast:  #2a2010;   /* Text auf Accent-Background */
    --mobile-chip-bg:          rgba(20, 15, 10, 0.4); /* Inactive Chip-Button-BG */

    /* Bar-Value-Akzente (LP/AP/G/BE/EP) — in allen Skins farbcodiert */
    --bar-lep-color:           #ff7a7a;
    --bar-asp-color:           #79b9ff;
    --bar-gold-color:          #ffd663;
    --bar-be-color:            #ffb968;
    --bar-ep-color:            #c9e3a5;

    /* Warn-Akzente für Mobile-Status (z.B. eBE-Warnung Kampfseite) */
    --mobile-warn-bg:          rgba(192, 57, 43, 0.18);
    --mobile-warn-border:      #c0392b;
    --mobile-warn-text:        #ff8c7a;

    /* Action-Button (Steigern im Charakter-Hub, grünlich) */
    --mobile-action-bg:        rgba(80, 110, 50, 0.7);
    --mobile-action-border:    #6b8a36;
    --mobile-action-bg-hover:  rgba(100, 140, 60, 0.85);
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}

/*
 * A11y: sichtbarer Tastatur-Focus (:focus-visible),
 * Maus-Klicks bekommen keinen Outline-Ring.
 */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--mobile-accent-strong);
    outline-offset: 2px;
}

/* Skip-Link: für Tastatur/Screenreader. Sichtbar erst, wenn fokussiert. */
.skip-to-main {
    position: absolute;
    left: -9999px;
    top: 1em;
    z-index: var(--z-toast);
}
.skip-to-main:focus {
    left: 1em;
    background: var(--mobile-accent);
    color: #000;
    padding: 0.5em 1em;
    border-radius: 4px;
    text-decoration: none;
}

/*
 * Sticky-Hover-Schutz auf Touch-Geräten.
 * Hover-Effekte (Hintergrund, Transform) bleiben dort sonst nach einem Tap
 * "kleben". (:active, :focus-visible bleiben unangetastet.)
 */
@media (hover: none) {
    a:hover,
    button:hover,
    .button:hover,
    .fertigkeit-card:hover,
    .zauber-card:hover,
    .fertigkeiten-tab:hover,
    .chat-toggle-btn:hover {
        background-image: none;
        transform: none;
        box-shadow: none;
    }
}