/* Shared base: reset, root typography, common element foundations, icon sizing.
   Loaded after shared-theme.css and before application global styles. */

/* Full-width surfaces and touch targets include their padding and borders,
   including in applications that do not load a vendor reset. */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 16px;
}

p {
    font-size: 16px;
    line-height: 1.55;
}

@media (max-width: 1023px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 21px;
    }
}

label {
    font-size: 13px;
    font-weight: 600;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: 15px;
}

@media (max-width: 1023px) {
    input, select, textarea {
        font-size: 16px;
    }
}

a {
    color: var(--app-primary);
}

a:hover {
    color: var(--app-primary-dark);
}

:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Shared SVG defaults. Contextual sizes are set where icons are used. */
.app-svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.125em;
    fill: currentColor;
}

.app-button .app-svg-icon,
.mobile-bottom-nav__item .app-svg-icon {
    width: 20px;
    height: 20px;
}

.app-filter-field__label .app-svg-icon {
    width: 18px;
    height: 18px;
    color: var(--app-primary);
}

.app-result-card__meta .app-svg-icon,
.app-badge .app-svg-icon {
    width: 16px;
    height: 16px;
}

.app-empty-state__icon .app-svg-icon {
    width: 32px;
    height: 32px;
}

.app-segmented__label .app-svg-icon {
    width: 20px;
    height: 20px;
}