:root {
    /* Core colors using OKLCH color space */
    --background: oklch(0.185 0 0);
    --foreground: oklch(0.875 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(0.215 0 0);
    --popover-foreground: oklch(0.875 0 0);
    --primary: oklch(0.65 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.756 0 0);
    --accent: oklch(0.34 0 0); /* Hover color  */
    --accent-foreground: oklch(0.89 0 0); /* Hover color of text */
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.4 0 0);
    --input: oklch(0.2 0 0);
    --ring: oklch(0.708 0 0);
    --radius: 0.5rem;

    --alert-background-danger: oklch(0.2 .05 20.9);

    --particle-purple: rgb(116, 76, 192);
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
}

* {
    border-color: var(--border);
}

body {
    background-color: var(--background);
    color: var(--foreground);
}

.bg-alert-danger-bg {
    background-color: var(--alert-background-danger);
}


.status-online {
    background-color: oklch(0.68 0.23 135);
}

.status-away {
    background-color: oklch(0.76 0.4 103);
}

.status-busy {
    background-color: oklch(0.54 0.2047 26.47);
}

.profile-pb {
    background-color: oklch(0.31 0.0 0);
}

.profile-pb-fancy {
    background: #5b1a8a;
    background: radial-gradient(circle,rgba(91, 26, 138, 1) 0%, rgba(82, 73, 80, 1) 100%);
}

.pretty-username {
    -webkit-text-stroke: 1.0px var(--border);
    user-select: none;
}

.no-select {
    user-select: none;
}

.nav-bar-text {
    font-size: 1.6rem;
    -webkit-text-stroke: 0.5px var(--border);
    font-weight: bold;
}

.sidebar-button {
    justify-content:left;
}

.lyro-semibold-test {
    font-weight: bold;
}