:root {
    --accent: #3b82f6;
    --accent-rgb: 59, 130, 246;
    --desktop-icon-rows: 6;
    --desktop-icon-size: 54px;
    --desktop-shortcut-row: 100px;
    --desktop-grid-strength: 0.28;
    --desktop-grid-layer-opacity: var(--desktop-grid-strength);
    --window-opacity: 0.9;
    --window-radius: 26px;
    --taskbar-glow: 0.62;
    --ui-font: "Manrope", sans-serif;
    --mono-font: "JetBrains Mono", monospace;
    --ink: #0f172a;
    --muted-ink: #475569;
    --line: rgba(15, 23, 42, 0.12);
    --shell-text: #f8fafc;
    --cursor-style: default;
    --custom-wallpaper: none;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    overflow: hidden;
    font-family: var(--ui-font);
    color: var(--shell-text);
    background: #08101f;
}

body,
body button,
body a,
body input,
body textarea,
body select {
    cursor: var(--cursor-style);
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

body.has-custom-wallpaper .desktop::before {
    background:
        linear-gradient(135deg, rgba(5, 10, 21, 0.72), rgba(8, 17, 33, 0.48)),
        var(--custom-wallpaper) center / cover no-repeat;
}

body[data-wallpaper="bliss"] .desktop::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        url("../img/img1.webp") center center / cover no-repeat;
}

body[data-wallpaper="bliss"] .desktop {
    --desktop-grid-layer-opacity: calc(var(--desktop-grid-strength) * 0.35);
}

body[data-wallpaper="aurora"] .desktop::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(139, 180, 255, 0.48), transparent 28%),
        radial-gradient(circle at 78% 24%, rgba(34, 211, 238, 0.22), transparent 26%),
        radial-gradient(circle at 80% 76%, rgba(56, 189, 248, 0.14), transparent 30%),
        linear-gradient(135deg, #071223 0%, #0b1833 34%, #142d61 100%);
}

body[data-wallpaper="sunset"] .desktop::before {
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 213, 158, 0.48), transparent 28%),
        radial-gradient(circle at 76% 22%, rgba(251, 146, 60, 0.3), transparent 30%),
        radial-gradient(circle at 82% 76%, rgba(245, 158, 11, 0.18), transparent 32%),
        linear-gradient(135deg, #240d1d 0%, #5d2f3c 38%, #0f3f75 100%);
}

body[data-wallpaper="matrix"] .desktop::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(45, 212, 191, 0.24), transparent 24%),
        radial-gradient(circle at 82% 28%, rgba(14, 165, 233, 0.18), transparent 24%),
        linear-gradient(135deg, #031613 0%, #06211c 45%, #0a3030 100%);
}

body[data-wallpaper="graphite"] .desktop::before {
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.12), transparent 24%),
        radial-gradient(circle at 80% 26%, rgba(148, 163, 184, 0.14), transparent 24%),
        linear-gradient(135deg, #0f172a 0%, #111827 42%, #273449 100%);
}