body {
    color: var(--color-text-primary-light);
    font-family: sans-serif;
    padding: var(--spacing-lg);
    padding-top: calc(var(--topbar-height) + var(--spacing-lg));
    font-family: 'Inter', sans-serif;
    margin: 0;
}

.background-accent,
.background-base {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.background-accent {
    background: var(--color-accent);
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.background-base {
    background: var(--color-background);
    opacity: calc(7/8);
}

p {
    font-size: var(--font-size-md);
}

h1 {
    font-size: var(--font-size-xxl);
    margin: var(--spacing-lg) 0;
    margin-top: 0; /* This would typically be the first element on a page */
}

h2 {
    font-size: var(--font-size-xl);
    margin: var(--spacing-md) 0;
}

sub {
    color: var(--color-text-secondary-light);
    font-size: var(--font-size-sm);
}

code {
    font-family: 'JetBrains Mono', monospace;
    background: var(--color-background);
    color: var(--color-text-primary-light);
    font-size: var(--font-size-md);
    border-radius: var(--radius-sm);
    outline: 1px solid var(--color-button-light-active);
    padding: var(--spacing-xs) var(--spacing-sm);
}

input {
    color: var(--color-text-primary-light);
    border: 1px solid var(--color-button-active);
    border-radius: 9999px;
}

option {
    background: var(--color-player-button-active);
    border: none;
    border-radius: 9999px;
    padding: 0 var(--spacing-md);
    height: var(--button-size);
    cursor: pointer;
    transition: background var(--transition-medium) ease, color var(--transition-medium) ease;
}

button, .play-button, .download-button,
.season-select, .player-back, .player-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: var(--button-size);
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
    border-radius: 9999px;
    background: var(--color-button-light);
    color: var(--color-text-primary-light);
    outline: 1px solid transparent;
    border: none;
    cursor: pointer;
    transition: background var(--transition-medium) ease, outline var(--transition-medium) ease, color var(--transition-medium) ease;
}

button:hover, .download-button:hover,
.season-select:hover, .player-back:hover, .player-settings-btn:hover {
    background: var(--color-button-light-hover);
    outline: 1px solid var(--color-button-light-focus);
}

button:active, button.active, .download-button:active,
.season-select:active, .player-back:active, .player-settings-btn:active {
    background: var(--color-button-light-active);
}

summary {
    cursor: pointer;
    user-select: none;
    color: var(--color-text-secondary-light);
    transition: color var(--transition-medium) ease;
}

summary:hover {
    color: var(--color-text-primary-light);
}

select {
    color: var(--color-text-primary-light);
    border: 1px solid var(--color-button-active);
    border-radius: 9999px;
    padding: 0 var(--spacing-md);
    height: var(--button-size);
    width: 100%;
    cursor: pointer;
    transition: background var(--transition-medium) ease, color var(--transition-medium) ease, outline var(--transition-medium) ease;
    background: var(--color-button-light);
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
}

input[type="text"] {
    padding: 0 var(--spacing-md);
    height: var(--button-size);
    font-size: var(--font-size-md);
    margin-right: var(--spacing-sm);
    outline: 1px solid var(--color-button-light) !important;
    background: transparent;
    transition: outline var(--transition-medium) ease, background var(--transition-medium) ease;
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
}

input[type="text"]:focus {
    background: var(--color-button-dark-focus);
    outline: 1px solid var(--color-button-light-focus) !important;
}

textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    width: calc(100% - var(--spacing-md) * 2);
    height: 240px;
    font-size: var(--font-size-md);
    color: var(--color-text-primary-light);
    outline: 1px solid var(--color-button-light) !important;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    backdrop-filter: var(--glass-blur) var(--glass-saturate);
    -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
    transition: outline var(--transition-medium) ease, background var(--transition-medium) ease;
}