/* ============================================================
   KirinVerse – Globales Styling
   ============================================================ */

/* --- Basis --- */
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* --- Typografie --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
}

p { color: var(--color-text); }

.highlight {
    color: #6d28d9;
    text-shadow: none;
}

[data-theme="light"] .highlight {
    color: #5b21b6;
    font-weight: 600;
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* --- Sections --- */
.section {
    padding: var(--space-20) 0;
}

.section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section__tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.section__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, var(--color-text-heading), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section__desc {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 4px 15px var(--color-primary-glow);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--color-primary-glow);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}

.btn--secondary {
    background: transparent;
    color: var(--color-primary-light);
    border: 1px solid var(--color-primary);
}
.btn--secondary:hover {
    background: rgba(124, 58, 237, 0.12);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-light);
    background: rgba(124, 58, 237, 0.08);
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
}

/* --- Badges --- */
.badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge--launch  { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.badge--novel   { background: rgba(124,58,237,0.15); color: #a78bfa; border: 1px solid rgba(124,58,237,0.3); }
.badge--chapter { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.badge--wiki    { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.badge--info    { background: rgba(148,163,184,0.15);color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: var(--space-20) var(--space-8);
    color: var(--color-text-muted);
}
.empty-state__icon { font-size: 4rem; margin-bottom: var(--space-4); }
.empty-state h2, .empty-state h3 { color: var(--color-text-heading); margin-bottom: var(--space-3); }
.empty-state p { margin-bottom: var(--space-6); }

/* --- Page Hero --- */
.page-hero {
    padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-12);
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: center;
}
.page-hero--novels { background: linear-gradient(135deg, #0d0d1a 0%, #1a0a3a 100%); }
.page-hero--wiki   { background: linear-gradient(135deg, #0d0d1a 0%, #0a1a3a 100%); }

.page-hero__title {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, #fff, var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.page-hero__desc {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* --- Genre Tags --- */
.genre-tag {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    background: rgba(124,58,237,0.1);
    color: var(--color-primary-light);
    border-radius: var(--radius-full);
    margin-right: var(--space-1);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-surface); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* --- Selektion --- */
::selection { background: var(--color-primary); color: #fff; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .section { padding: var(--space-12) 0; }
    .section__title { font-size: var(--text-3xl); }
    .page-hero__title { font-size: var(--text-4xl); }
    .container { padding: 0 var(--space-4); }
}

@media (max-width: 480px) {
    .section__title { font-size: var(--text-2xl); }
    .page-hero__title { font-size: var(--text-3xl); }
}