/* App shell defaults — theme.css must load first */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-base);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--spacing-base);
    line-height: var(--spacing-line-height);
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, var(--font-ui));
}

button {
    font-family: var(--font-ui);
    cursor: pointer;
}

input {
    font-family: var(--font-ui);
}

/* Sharp corners on all interactive elements (AC1.5) */
button,
input,
select,
textarea {
    border-radius: 0;
}

/* Scrollbar styling — thin, subtle, matching dark theme */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-subtle);
}

/* Content fade-in after hydration / client navigation */

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.browse-page {
    animation: fade-in 0.2s ease-out;
}