/*
 * Base layer: reset, focus, scrollbars, selection. Loaded after style.css so
 * these win ties
 */

/* Self-hosted IBM Plex Sans, replacing the Google Fonts CDN link
   for the app chrome. woff2 latin subset, 400 + 700 to match the old request.
   The email output and its previews keep their own Google Fonts @import
   (app/theme.py etc.) because recipients' mail clients need it. */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

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

/* Body reset + shell body. Only base.html links this and it always renders the .app-shell,
   so the legacy non-shell body rules were dead and dropped; margin:0 stays
   because nothing else zeroes the UA default. */
body {
    margin: 0;
}
body:has(.app-shell) {
    padding: 0;
    display: block;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
}

/* Visible keyboard focus without stealing mouse-click focus rings. */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Token-driven scrollbars that follow the theme. */
* {
    scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-strong);
    background-clip: content-box;
}

::selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}