/* ===============================================
   Modern CSS Reset + Base Styles (2026)
   Place this in the lowest layer
=============================================== */

@layer reset {
    /* 1. Use a more intuitive box model */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. Remove default margins & padding */
    * {
        margin: 0;
        padding: 0;
    }

    /* 3. Allow percentage-based heights */
    html,
    body {
        height: 100%;
    }

    /* 4. Core typography & smooth scrolling */
    html {
        font-family: var(--font-family-base);
        line-height: var(--line-height-base, 1.5);
        -webkit-text-size-adjust: 100%; /* Prevent font scaling on mobile */
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-background, --color-white);
        color: var(--color-text, #0f172a);
        font-size: var(--font-size-base, 1rem);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 5. Make images and media behave nicely */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* 6. Typography resets */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-weight-semibold, 600);
        line-height: var(--line-height-tight, 1.25);
    }

    p {
        margin-bottom: var(--spacing-4, 1rem); /* Use your spacing tokens */
    }

    /* 7. Form elements */
    input,
    button,
    textarea,
    select {
        font: inherit; /* Inherit font styles */
        color: inherit;
    }

    button,
    input[type="button"],
    input[type="submit"] {
        cursor: pointer;
    }

    /* Remove annoying outlines on focus, but keep accessible focus styles */
    :focus-visible {
        outline: 2px solid var(--color-border-focus, currentColor);
        outline-offset: 2px;
    }

    /* 8. Lists */
    ul,
    ol {
        list-style: none;
    }

    /* 9. Anchor styles */
    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    /* 10. Reduced motion respect */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

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

    /* 11. Improve text wrapping */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: pretty;
    }
}