/* =====================================================================
   Roleplay Systems Dashboard – Basis: Tokens, Reset, Typografie
   ===================================================================== */
:root {
    color-scheme: dark;

    --bg: #07080b;
    --bg-elevated: #0d0f14;
    --surface: rgba(255, 255, 255, .032);
    --surface-2: rgba(255, 255, 255, .05);
    --surface-3: rgba(255, 255, 255, .075);
    --surface-solid: #111319;
    --surface-popover: rgba(17, 19, 25, .96);
    --input: rgba(255, 255, 255, .04);

    --border: rgba(255, 255, 255, .07);
    --border-strong: rgba(255, 255, 255, .12);
    --border-focus: rgba(143, 211, 255, .55);

    --text: #e8ecf2;
    --text-2: #a1aab7;
    --text-3: #6c7583;

    --accent: #8fd3ff;
    --accent-strong: #63bff7;
    --accent-soft: rgba(143, 211, 255, .1);
    --accent-softer: rgba(143, 211, 255, .06);
    --accent-contrast: #05131d;

    --success: #5ee0a0;
    --success-soft: rgba(94, 224, 160, .12);
    --warning: #f5c35b;
    --warning-soft: rgba(245, 195, 91, .12);
    --danger: #f78b8b;
    --danger-soft: rgba(247, 139, 139, .12);
    --discord: #5865f2;

    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    --blur: blur(16px) saturate(125%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .75);

    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: .14s;
    --dur-2: .22s;
    --dur-3: .36s;

    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --sidebar-w: 264px;
    --topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sehr dezente Lichtflächen im Hintergrund – Grundlage für den Glas-Effekt */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(143, 211, 255, .075), transparent 60%),
        radial-gradient(700px 480px at 100% 0%, rgba(99, 120, 255, .045), transparent 60%),
        radial-gradient(800px 600px at 50% 120%, rgba(143, 211, 255, .04), transparent 60%);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }

img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }

h1, h2, h3, h4, h5, p { margin: 0; }
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; font-weight: 620; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 600; }
h4 { font-size: .9rem; font-weight: 600; }

code, kbd, .mono { font-family: var(--font-mono); font-size: .86em; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; }

::selection { background: rgba(143, 211, 255, .28); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .14); }
::-webkit-scrollbar-track { background: transparent; }

[hidden] { display: none !important; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Animationen */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.anim-rise { animation: rise-in var(--dur-3) var(--ease) both; }
.stagger > * { animation: rise-in var(--dur-3) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .00s; }
.stagger > *:nth-child(2) { animation-delay: .03s; }
.stagger > *:nth-child(3) { animation-delay: .06s; }
.stagger > *:nth-child(4) { animation-delay: .09s; }
.stagger > *:nth-child(5) { animation-delay: .12s; }
.stagger > *:nth-child(6) { animation-delay: .15s; }
.stagger > *:nth-child(7) { animation-delay: .18s; }
.stagger > *:nth-child(8) { animation-delay: .21s; }
.stagger > *:nth-child(n+9) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}