:root[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-tertiary: rgba(255, 255, 255, 0.5);
}

:root[data-theme="light"] {
    --bg-primary: #FFF8F0;
    --bg-secondary: #FFEDE0;
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.7);
    --text-tertiary: rgba(0, 0, 0, 0.5);
}

.page-background {
    position: relative;
    background: var(--bg-primary);
    transition: background 0.3s ease;
}

.page-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(var(--main-color-rgb), 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(var(--main-color-rgb), 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--main-color-rgb), 0.1) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(var(--main-color-rgb), 0.12) 0%, transparent 45%),
        radial-gradient(circle at 70% 30%, rgba(var(--main-color-rgb), 0.1) 0%, transparent 45%),
        radial-gradient(circle at 15% 60%, rgba(var(--main-color-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(circle at 85% 40%, rgba(var(--main-color-rgb), 0.09) 0%, transparent 50%),
        radial-gradient(circle at 60% 10%, rgba(var(--main-color-rgb), 0.07) 0%, transparent 55%),
        radial-gradient(circle at 40% 90%, rgba(var(--main-color-rgb), 0.08) 0%, transparent 55%);
    z-index: -2;
    pointer-events: none;
    opacity: 1;
}

:root[data-theme="light"] .page-background::before {
    opacity: 0.4;
    background:
        radial-gradient(circle at 10% 20%, rgba(var(--main-color-rgb), 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(var(--main-color-rgb), 0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--main-color-rgb), 0.05) 0%, transparent 50%);
}

.page-background::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(var(--main-color-rgb), 0.05) 2px, rgba(var(--main-color-rgb), 0.05) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(var(--main-color-rgb), 0.03) 2px, rgba(var(--main-color-rgb), 0.03) 4px);
    z-index: -2;
    pointer-events: none;
    opacity: 0.7;
}

:root[data-theme="light"] .page-background::after {
    opacity: 0.4;
}