html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color var(--transition-slow) var(--ease-in-out),
                color var(--transition-slow) var(--ease-in-out);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--color-secondary-accent-rgb), 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: var(--z-1);
}

[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(var(--color-secondary-accent-rgb), 0.08) 0%, transparent 50%);
}

[data-theme="dark"] body {
    background-color: var(--bg-body);
    background-image:
        linear-gradient(rgba(var(--color-accent-rgb), 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.015) 1px, transparent 1px);
    background-size: 48px 48px;
}

.card,
.card-hover,
.card-featured {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    transition: background-color var(--transition-normal) var(--ease-in-out),
                border-color var(--transition-normal) var(--ease-in-out),
                box-shadow var(--transition-normal) var(--ease-in-out);
}

.card-hover:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-color-hover);
}

.card-featured {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-body-alt) 100%);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    transition: color var(--transition-normal) var(--ease-in-out);
}

h1 .accent, h2 .accent, h3 .accent {
    color: var(--color-accent);
}

p, li {
    color: var(--text-secondary);
    transition: color var(--transition-normal) var(--ease-in-out);
}

a {
    color: var(--color-accent);
    transition: color var(--transition-fast) var(--ease-in-out);
}

a:hover {
    color: var(--color-accent-hover);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-8) 0;
}

blockquote {
    border-left: 3px solid var(--color-accent);
    background-color: var(--bg-surface);
    color: var(--text-secondary);
}

code {
    background-color: var(--code-bg);
    color: var(--code-text);
    transition: background-color var(--transition-normal) var(--ease-in-out),
                color var(--transition-normal) var(--ease-in-out);
}

pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border-color);
}

input, select, textarea {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
    transition: border-color var(--transition-fast) var(--ease-in-out),
                background-color var(--transition-fast) var(--ease-in-out),
                box-shadow var(--transition-fast) var(--ease-in-out);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
    outline: none;
}

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

th {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color-strong);
}

td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.theme-transitioning,
.theme-transitioning * {
    transition: background-color var(--transition-slow) var(--ease-in-out),
                color var(--transition-slow) var(--ease-in-out),
                border-color var(--transition-slow) var(--ease-in-out),
                fill var(--transition-slow) var(--ease-in-out),
                stroke var(--transition-slow) var(--ease-in-out) !important;
}

@media (prefers-reduced-motion: reduce) {
    body,
    .card,
    .card-hover,
    .card-featured,
    a,
    input,
    select,
    textarea,
    .theme-transitioning,
    .theme-transitioning * {
        transition-duration: 0.01ms !important;
    }
}