/* Base styles - Global resets and typography */

/* Inter is loaded from the page head (see external_stylesheets in app.py) */

/* Global base styles */
html, body {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    background: var(--color-canvas, #f5f7fa);
    margin: 0;
    padding: 0;
    color: var(--color-ink-700);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

* {
    box-sizing: border-box;
}

/* Typography */
label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink-700);
}

/* Scrollbars: thin and translucent, out of the way of the content */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 70, 90, 0.35) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background: rgba(60, 70, 90, 0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(60, 70, 90, 0.45);
}

:root[data-theme="dark"] { scrollbar-color: rgba(205, 213, 225, 0.30) transparent; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(205, 213, 225, 0.25); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(205, 213, 225, 0.40); }