/*
 * reset.css
 * Purpose: low-specificity structural reset with accessibility-safe defaults.
 * Scope: keep only UA normalization. Put theme/branding in tokens.css or components.css.
 */

/* 1) Global box model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2) Document-level safety */
:root {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
}

/* 3) Text blocks: remove UA margins only */
:where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, address, dl, dd) {
    margin: 0;
}

/* Preserve semantic list markers by default.
     If you need an unstyled list, explicitly set role="list". */
:where(ul[role="list"], ol[role="list"]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 4) Media and embedded content */
:where(img, picture, svg, video, canvas, iframe, embed, object) {
    max-inline-size: 100%;
    block-size: auto;
}

:where(iframe) {
    border: 0;
}

/* 5) Tables */
:where(table) {
    border-collapse: collapse;
    border-spacing: 0;
}

:where(caption, th) {
    text-align: inherit;
}

/* 6) Forms: inherit typography, keep native affordances */
:where(button, input, select, textarea),
::file-selector-button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

:where(button, select) {
    text-transform: none;
}

:where(textarea) {
    margin: 0;
}

:where(input[type="search" i]) {
    -webkit-appearance: textfield;
}

:where(input:is([type="radio" i], [type="checkbox" i])) {
    margin: 0;
}

:where(fieldset) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

:where(legend) {
    padding: 0;
}

::placeholder {
    opacity: 1;
}

/* 7) Interaction */

/* Do not remove outlines. Only adjust offset for visibility. */
:where(:focus-visible) {
    outline-offset: 2px;
}

[tabindex="-1"]:focus {
    outline: none !important;
}

/* 8) State and utility */
:where([hidden]:not([hidden="until-found" i])) {
    display: none !important;
}

/* 9) Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Recommended to keep OUT of reset.css (move to tokens.css/components.css):
 * - font-family, font-size scale, line-height tokens
 * - brand colors, surface/background colors
 * - button/input border, radius, and fill design
 * - layout spacing rules and component-level typography
 * - page-height layout rules (100vh / 100dvh / 100dvb)
 * - link decoration thickness/offset and cursor styling
 */