/* =============================================================== */
/* Reset                                                           */
/* =============================================================== */

/* Global */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  gap: var(--space-gap);
}

/* Basic Settings */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100dvh;
  line-height: var(--line-height);
  color: var(--color-black);
  background-color: var(--color-white);
  text-rendering: optimizeLegibility;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

/* =============================================================== */
/* Typography: Hyphenation & Safe Wrapping                        */
/* =============================================================== */

/* Enable automatic hyphenation where the browser has dictionaries.
   Apply to common text containers; avoid URLs and code. */
:where(*) {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  hyphenate-limit-chars: auto 4 4;
  text-wrap: pretty;
}

/* Don’t hyphenate URLs, title, badges or code-like content */
header .title .text *,
code,
pre,
kbd,
samp,
h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 *,
.badge,
.badge * {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

/* Pseudo Classes and Pseudo Elements */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}