/* =========================================================
   MMOwelten UI Kit 1.0
   Zentrale Design-Tokens und wiederverwendbare Komponenten
   ========================================================= */

:root {
    --mmow-color-primary: #19b57a;
    --mmow-color-primary-700: #0f7650;
    --mmow-color-primary-100: #e6f8f0;
    --mmow-color-ink: #16211d;
    --mmow-color-muted: #687871;
    --mmow-color-canvas: #f5f7f6;
    --mmow-color-surface: #ffffff;
    --mmow-color-border: #dce8e2;

    --mmow-color-alpha: #1fa56f;
    --mmow-color-beta: #2b78d0;
    --mmow-color-early: #d48320;
    --mmow-color-release: #7b4bc9;
    --mmow-color-cancelled: #b43b3b;
    --mmow-color-announced: #65758a;

    --mmow-color-steam: #1b2838;
    --mmow-color-discord: #5865f2;
    --mmow-color-reddit: #ff4500;
    --mmow-color-youtube: #ff0033;
    --mmow-color-twitter: #111111;

    --mmow-radius-sm: 10px;
    --mmow-radius-md: 16px;
    --mmow-radius-lg: 26px;
    --mmow-shadow-card: 0 16px 44px rgba(10, 35, 27, .10);
    --mmow-shadow-hover: 0 22px 50px rgba(10, 35, 27, .16);
    --mmow-transition: 180ms ease;
}

/* Farbige Icon-Flächen */
.mmow-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--mmow-color-primary-100);
    color: var(--mmow-color-primary-700);
}
.mmow-icon svg { width: 1em; height: 1em; fill: currentColor; }

.mmow-icon--developer { background:#e7f8f1; color:#13865b; }
.mmow-icon--publisher { background:#edf0fb; color:#4d62b4; }
.mmow-icon--engine { background:#fff1df; color:#b46a13; }
.mmow-icon--genre { background:#f2eafb; color:#7a4eb5; }
.mmow-icon--model { background:#e8f3fb; color:#287ab0; }
.mmow-icon--release { background:#f8eafd; color:#8f46a8; }
.mmow-icon--platform { background:#e8f7f6; color:#147e78; }
.mmow-icon--clock { background:#e9f8f1; color:#178e63; }

/* Einheitliche Karten */
.mmow-ui-card {
    border: 1px solid var(--mmow-color-border);
    border-radius: var(--mmow-radius-md);
    background: var(--mmow-color-surface);
    box-shadow: var(--mmow-shadow-card);
    transition: transform var(--mmow-transition), box-shadow var(--mmow-transition);
}
.mmow-ui-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mmow-shadow-hover);
}

/* Einheitliche Buttons */
.mmow-ui-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:46px;
    border-radius:11px;
    padding:11px 16px;
    font-weight:900;
    text-decoration:none;
    transition:transform var(--mmow-transition), filter var(--mmow-transition), box-shadow var(--mmow-transition);
}
.mmow-ui-button:hover { transform:translateY(-2px); filter:brightness(1.05); }
.mmow-ui-button--website { background:var(--mmow-color-primary); color:#fff !important; }
.mmow-ui-button--steam { background:var(--mmow-color-steam); color:#fff !important; }
.mmow-ui-button--discord { background:var(--mmow-color-discord); color:#fff !important; }
.mmow-ui-button--reddit { background:var(--mmow-color-reddit); color:#fff !important; }
.mmow-ui-button--youtube { background:var(--mmow-color-youtube); color:#fff !important; }
.mmow-ui-button--twitter { background:var(--mmow-color-twitter); color:#fff !important; }

/* Badges */
.mmow-ui-badge {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    border-radius:999px;
    padding:6px 12px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.mmow-ui-badge--alpha { background:var(--mmow-color-alpha); color:#fff; }
.mmow-ui-badge--beta { background:var(--mmow-color-beta); color:#fff; }
.mmow-ui-badge--early-access { background:var(--mmow-color-early); color:#fff; }
.mmow-ui-badge--release { background:var(--mmow-color-release); color:#fff; }
.mmow-ui-badge--cancelled { background:var(--mmow-color-cancelled); color:#fff; }
.mmow-ui-badge--announced { background:var(--mmow-color-announced); color:#fff; }

/* Typografie */
.mmow-ui-eyebrow {
    color:var(--mmow-color-muted);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.065em;
    text-transform:uppercase;
}
.mmow-ui-value {
    color:var(--mmow-color-ink);
    font-weight:850;
}