////
///
/// Base Reset
/// ===========================================================================
///
/// Minimal browser normalization for core HTML elements.
/// Opinion-free reset targeting consistent cross-browser behavior.
///
/// @group Reset
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Box Sizing
// ============================================================================

@use "../01-core/external" as *;

@layer ss.reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    // ============================================================================
    // Document
    // ============================================================================

    html {
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
    }

    // ============================================================================
    // Body
    // ============================================================================

    // `html` keeps normalize's 1.15 (it only seeds rem-relative metrics);
    // running text gets the readable base line height.
    body {
        margin: 0;
        line-height: var(--ss-line-height-base, 1.5);
        min-height: 100vh;
        min-height: 100dvh;
    }

    // ============================================================================
    // Sections
    // ============================================================================

    main {
        display: block;
    }

    // ============================================================================
    // Grouping Content
    // ============================================================================

    hr {
        height: 0;
        color: inherit;
        border-top-width: q(1);
    }

    // ============================================================================
    // Media
    // ============================================================================

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    // ============================================================================
    // Interactive
    // ============================================================================

    summary {
        display: list-item;
    }

    // ============================================================================
    // Hidden
    // ============================================================================

    [hidden] {
        display: none !important;
    }

    // ============================================================================
    // Focus
    // ============================================================================

    // One keyboard focus ring for every element, from the focus tokens. It is
    // in the lowest layer, so components that draw their own indicator win.
    :focus-visible {
        outline: var(--ss-focus-ring-width, #{q(2)}) solid
            var(--ss-focus-ring-color, currentColor);
        outline-offset: var(--ss-focus-ring-offset, #{q(2)});
    }
}