/*
 * assets/css/reset.css
 * Modern CSS Reset based on Josh Comeau's pattern
 * Source: https://www.joshwcomeau.com/css/custom-css-reset/ (verified 2026-02-21)
 *
 * LOAD ORDER NOTE: variables.css MUST be loaded before this file in HTML.
 * This file uses var(--color-bg-base) and var(--font-body) from variables.css.
 * Correct order: reset.css → variables.css → typography.css → layout.css → utilities.css
 *
 * Wait — actually CSS link tags in HTML head are applied in order, so variables.css
 * must appear FIRST, then reset.css can reference its custom properties.
 * See HTML boilerplate: variables.css → reset.css → typography.css → layout.css → utilities.css
 */

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

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

/* 3. Apply base body styles using design tokens from variables.css. */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* 4. Improve media defaults. */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 5. Inherit fonts for form elements. */
input, button, textarea, select {
  font: inherit;
}

/* 6. Avoid text overflows. */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 7. Improve paragraph line breaking. */
p {
  text-wrap: pretty;
}

/* 8. Improve heading line breaking. */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 9. Prevent horizontal overflow globally. */
html {
  overflow-x: hidden;
}