/* base: resets and global base rules */
*{box-sizing:border-box}
html,body{height:100%}

/* Ensure the root and body use the theme background so mobile browser chrome
  (which can change viewport height) never reveals a different-color gap. */
html, body { background: var(--body-bg); }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  /* Use dynamic viewport units where available; fallback to the --vh shim set by JS */
  min-height:100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
  /* enforce a minimum page width to keep layout stable */
  min-width:320px;
  display:flex;
  flex-direction:column;
  color:var(--text);
  /* body background uses token --body-bg */
  background:linear-gradient(180deg, color-mix(in srgb, var(--body-bg) 90%, #0b1220 10%), var(--body-bg)) fixed;
}

/* Minimum width set to 320 -- a generally accepted minimum for mobile devices */
.wrap{min-width:320px}
/* Link styles: same color for visited and unvisited, theme-aware */
a{
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link-color) 40%, transparent);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:visited{
  color: var(--link-color);
}

a:hover{
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

a:focus{
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}