/* =========================================================================
   Reset - The Clean Slate
   -------------------------------------------------------------------------
   A comprehensive reset to neutralize browser inconsistencies and enforce
   a predictable starting point. Includes modern best practices.
   ========================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit; /* Inherit typography by default */
}

/* 1. Set core root defaults */
html {
    height: 100%;
    /* A small UX detail that makes navigating long pages with anchors a joy. */
    scroll-behavior: smooth;
    /* Prevents the flash on tap for mobile browsers, a key part of a native-like feel. */
    -webkit-tap-highlight-color: transparent;
}

/* 2. Make the body take up the full viewport height */
body {
    height: 100%;
}

/* 3. Make images and media responsive by default */
img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/* 4. Ensure form elements inherit font styles for consistency */
input, button, textarea, select {
  font: inherit;
}

/* 5. A signature of premium websites: custom text selection styling. */
::selection {
    background-color: var(--primary-color);
    color: #fff;
    text-shadow: none;
}